How to get it working in Karma?

[jbinto]

On react-boilerplate/react-boilerplate#79 (comment) (see link for more info) we are trying to convert from mocha/jsdom to Karma/Chrome.

I tried to create a Karma plugin for chai-enzyme (a naive copy paste based on another karma-chai-foobar) but I'm having trouble with the fact that chai-enzyme is published as an ES6 module, and Karma doesn't understand that.

I admit I am pretty fuzzy when it comes to implementation details of require, CommonJS, ES modules, etc. I know even less about Karma plugins.

How could we get this working?

[vesln]

@jbinto thanks for your work!

chai-enzyme is transpiled to es2015 with babel, so this shouldn't be the issue.

i believe it's the fact that we are trying to run commonjs code in a browser environment without any preparation. both mocha and chai come with a browser bundle see https://github.com/xdissent/karma-chai/blob/master/index.js#L9

i believe we can use webpack to accomplish it see https://webpack.github.io/docs/configuration.html#output-librarytarget

this can be done either in this repository, a separate one or in your karma plugin.

let me know if you wanna try to tackle this... i'll be very happy to assist in any way possible

[ljharb]

(You can also use browserify)

[marr]

I am having trouble getting this working with browserify and tape. Unrelated to karma but it seems appropriate:

$ browserify -t babelify test/components/my-component.spec.js
Error: Cannot find module 'react/lib/ReactContext' from '/Users/dm/src/my-boilerplate/node_modules/enzyme/build'
    at /Users/dm/src/my-boilerplate/node_modules/resolve/lib/async.js:46:17
    at process (/Users/dm/src/my-boilerplate/node_modules/resolve/lib/async.js:173:43)
    at ondir (/Users/dm/src/my-boilerplate/node_modules/resolve/lib/async.js:188:17)
    at load (/Users/dm/src/my-boilerplate/node_modules/resolve/lib/async.js:69:43)
    at onex (/Users/dm/src/my-boilerplate/node_modules/resolve/lib/async.js:92:31)
    at /Users/dm/src/my-boilerplate/node_modules/resolve/lib/async.js:22:47
    at FSReqWrap.oncomplete (fs.js:82:15)

Here is a repo I am working on: https://github.com/marr/my-boilerplate

[marr]

FWIW, I did get this working in browser with tape, enzymejs/enzyme#132 (comment)

[vesln]

good to know, thanks!

[ayrton]

@jbinto is it possible you can get it working by requiring like this:

var chai-enzyme = require('chai-enzyme').default

// vs.

var chai-enzyme = require('chai-enzyme')

This is something we will have to address soon, let me know if that fixes it for you if so I'll make some time to get this working out of the box. For future me see babel-plugin-add-module-exports.

[ljharb]

Actually a better solution would be for chai-enzyme's main entry point to use module.exports = theDefault instead of export default theDefault. Consumers should never have to interact with babel's CommonJS interop.

[ayrton]

@jbinto this should be no longer an issue as of v0.3.0, feel free to re-open if you still have any problems.

[reintroducing]

I'm trying to get this working with a Karma/webpack setup and I'm pretty lost as to how to do this. What is the proper way to get this working with Karma? Is there documentation anywhere that would show this? Would really appreciate any help offered.

[ayrton]

@reintroducing I'm not familiar with karma, but I saw @jbinto figured this out in react-boilerplate/react-boilerplate#119 & react-boilerplate/react-boilerplate#150. Maybe checking out react-boilerplate's karma.conf.js will help you out.

[reintroducing]

@ayrton I looked it over before posting but the setup is slightly different than mine. I'm going to try again with that exact setup when I get a moment and see if I can chase this down. Thanks for the links.