Karma and chai-enzyme

[mxstbr]

We had to remove chai-enzyme to get our test setup with Karma working. This is a shame, because the output by chai-enzyme when a test fails is incredibly useful, much better than the current one.

I want to add chai-enzyme again, but there are a few issues to be resolved which @jbinto is working on.

See #79 (comment) (archived) and enzymejs/chai-enzyme#16 (active discussion) for more information.

[jbinto]

I'll work on this again now that chai-enzyme has been updated to work with plain require:

enzymejs/chai-enzyme#16 (comment)

[jbinto]

FWIW, I took another look at this today and I'm still confused.

I am pulling in karma-chai-enzyme (which is a naive copy paste of karma-dirty-chai) and getting this:

Uncaught ReferenceError: require is not defined
  at /Users/jbinto/dev/react-boilerplate/node_modules/chai-enzyme/build/index.js:3

[jbinto]

Another boilerplate (davezuko/react-redux-starter-kit) seems to have gotten chai-enzyme working with Karma:

dvdzkwsk/react-redux-starter-kit@311aab2

An entirely different approach than what we're doing.

What we do:

• In karma.conf, include all test files (../app/**/*.test.js) to be preprocessed.

What they do:

• Only preprocess a single file called test-bundler.js.
• test-bundler.js uses plain old chai.use statements, which means we don't have to deal with crazy ad-hoc Karma plugins. Then, it manually requires all test files and source files.

edit: This approach is documented here https://github.com/webpack/karma-webpack/blob/1985f363e9cf39bdbcf2a15fadd3cbef98f341b9/README.md#alternative-usage

[jbinto]

• include sinon in resolve.alias
• define externals for enzyme (jsdom, cheerio, ...) (ref)
• use ImportsLoader for sinon (require, define) (ref) (n.b. not sure why this is needed)
• create test-bundler.js
• test-bundler.js: chai.use statements (ref)
• test-bundler.js: require all tests (ref)
• karma.conf: preprocess test-bundler instead of ** (ref)
• karma.conf: files test-bundler instead of **
• restore chai-enzyme-style assertions (ref 4ac051b)

[jbinto]

OK, I'm officially lost.

I've done everything in the checklist above, but something's wrong with babel/webpack.

WIP commit: jbinto@55f296b

Output of npm run test (gist): https://gist.github.com/jbinto/9beacd50a0044f756efe

JSX/etc errors:

npm run test 2>&1 | grep 'Module parse'
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/chai-enzyme/test/attr.test.js Line 4: Unexpected token <
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/chai-enzyme/test/checked.test.js Line 4: Unexpected token <
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/chai-enzyme/test/blank.test.js Line 4: Unexpected token <
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/chai-enzyme/test/className.test.js Line 4: Unexpected token <
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/chai-enzyme/test/contain.test.js Line 4: Unexpected token <
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/chai-enzyme/test/data.test.js Line 4: Unexpected token <
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/chai-enzyme/test/descendants.test.js Line 4: Unexpected token <
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/chai-enzyme/test/disabled.test.js Line 4: Unexpected token <
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/chai-enzyme/test/empty.test.js Line 4: Unexpected token <
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/chai-enzyme/test/exist.test.js Line 4: Unexpected token <
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/chai-enzyme/test/html.test.js Line 4: Unexpected token <
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/chai-enzyme/test/id.test.js Line 4: Unexpected token <
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/chai-enzyme/test/inspect.test.js Line 1: Unexpected token
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/chai-enzyme/test/match.test.js Line 4: Unexpected token <
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/chai-enzyme/test/null.test.js Line 7: Unexpected token <
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/chai-enzyme/test/present.test.js Line 4: Unexpected token <
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/chai-enzyme/test/prop.test.js Line 4: Unexpected token <
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/chai-enzyme/test/ref.test.js Line 4: Unexpected token <
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/chai-enzyme/test/selected.test.js Line 4: Unexpected token <
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/chai-enzyme/test/state.test.js Line 9: Unexpected token <
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/chai-enzyme/test/style.test.js Line 4: Unexpected token <
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/chai-enzyme/test/tagName.test.js Line 4: Unexpected token <
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/chai-enzyme/test/text.test.js Line 4: Unexpected token <
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/chai-enzyme/test/value.test.js Line 4: Unexpected token <
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/fsevents/CHANGELOG.md Line 1: Unexpected token ILLEGAL
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/fsevents/LICENSE Line 1: Unexpected identifier
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/fsevents/Readme.md Line 1: Unexpected token ILLEGAL
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/fsevents/binding.gyp Line 2: Unexpected token :
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/fsevents/fsevents.cc Line 6: Unexpected token ILLEGAL
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/fsevents/src/constants.cc Line 7: Unexpected token ILLEGAL
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/fsevents/src/async.cc Line 7: Unexpected token {
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/fsevents/src/locking.cc Line 6: Unexpected token :
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/fsevents/src/methods.cc Line 6: Unexpected token :
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/fsevents/src/storage.cc Line 6: Unexpected identifier
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/fsevents/src/thread.cc Line 7: Unexpected token ILLEGAL
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/fsevents/lib/binding/Release/node-v47-darwin-x64/fse.node Line 1: Unexpected token ILLEGAL
Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/fsevents/node_modules/node-pre-gyp/lib/util/nw-pre-gyp/index.html Line 1: Unexpected token <

Module/import errors:

npm run test 2>&1 | grep 'Module not found'
Module not found: Error: Cannot resolve module 'node-gyp' in /Users/jbinto/dev/react-boilerplate/node_modules/fsevents/node_modules/node-pre-gyp/lib/util
Module not found: Error: Cannot resolve module 'npm' in /Users/jbinto/dev/react-boilerplate/node_modules/fsevents/node_modules/node-pre-gyp/lib/util
Module not found: Error: Cannot resolve module 'tap' in /Users/jbinto/dev/react-boilerplate/node_modules/base64url/test
Module not found: Error: Cannot resolve module 'should' in /Users/jbinto/dev/react-boilerplate/node_modules/fastparse/test
Module not found: Error: Cannot resolve module 'tap' in /Users/jbinto/dev/react-boilerplate/node_modules/jwa/node_modules/base64url/test
Module not found: Error: Cannot resolve module 'tap' in /Users/jbinto/dev/react-boilerplate/node_modules/jwa/test
Module not found: Error: Cannot resolve module 'tape' in /Users/jbinto/dev/react-boilerplate/node_modules/jws/test
Module not found: Error: Cannot resolve module 'should' in /Users/jbinto/dev/react-boilerplate/node_modules/watchpack/test
Module not found: Error: Cannot resolve module 'tap' in /Users/jbinto/dev/react-boilerplate/node_modules/asn1/tst/ber
Module not found: Error: Cannot resolve module 'tap' in /Users/jbinto/dev/react-boilerplate/node_modules/asn1/tst/ber
Module not found: Error: Cannot resolve module 'tap' in /Users/jbinto/dev/react-boilerplate/node_modules/fsevents/node_modules/asn1/tst/ber
Module not found: Error: Cannot resolve module 'tap' in /Users/jbinto/dev/react-boilerplate/node_modules/fsevents/node_modules/asn1/tst/ber
Module not found: Error: Cannot resolve module 'tap' in /Users/jbinto/dev/react-boilerplate/node_modules/google-auth-library/node_modules/asn1/tst/ber
Module not found: Error: Cannot resolve module 'tap' in /Users/jbinto/dev/react-boilerplate/node_modules/google-auth-library/node_modules/asn1/tst/ber
Module not found: Error: Cannot resolve module 'tap' in /Users/jbinto/dev/react-boilerplate/node_modules/googleapis/node_modules/asn1/tst/ber
Module not found: Error: Cannot resolve module 'tap' in /Users/jbinto/dev/react-boilerplate/node_modules/googleapis/node_modules/asn1/tst/ber
Module not found: Error: Cannot resolve module 'tap' in /Users/jbinto/dev/react-boilerplate/node_modules/fsevents/test
Module not found: Error: Cannot resolve module 'tap' in /Users/jbinto/dev/react-boilerplate/node_modules/fsevents/test
Module not found: Error: Cannot resolve module 'aws-sdk' in /Users/jbinto/dev/react-boilerplate/node_modules/fsevents/node_modules/node-pre-gyp/lib
Module not found: Error: Cannot resolve module 'aws-sdk' in /Users/jbinto/dev/react-boilerplate/node_modules/fsevents/node_modules/node-pre-gyp/lib
Module not found: Error: Cannot resolve module 'aws-sdk' in /Users/jbinto/dev/react-boilerplate/node_modules/fsevents/node_modules/node-pre-gyp/lib

[jbinto]

Looking really closely at https://github.com/davezuko/react-redux-starter-kit and I just can't see what I'm doing differently.

[jbinto]

WTF is it doing trying to import a .md file?

Module parse failed: /Users/jbinto/dev/react-boilerplate/node_modules/fsevents/CHANGELOG.md Line 1: Unexpected token ILLEGAL

Not to mention all of the chai-enzyme tests....

[jbinto]

Aha!

jbinto@55f296b#diff-507b7b6eb038b4024f4fd14f8528c2feR20

I'm pulling in */**/*.test.js, including .test files inside node_modules!.

[jbinto]

The other boilerplate has a solid separation between src and test.

The way this repo is set up makes it a little more difficult to make a single glob that describes the tests we want to target. (Not true, just target ./app/**/*.test.js.)

Also see #149

[jbinto]

jbinto@5518584

OK, now I'm on the right track. Gotta take a break though, I'm in a coffee shop and my laptop battery is about to die.

TODO:

• use ImportsLoader for sinon (require, define) (ref) (n.b. figure out why this is needed)
• restore chai-enzyme-style assertions (ref 4ac051b)

[jbinto]

Perspective:

Before #117, the test setup was mocha+jsdom executing in a Node environment.

After #117, the test setup is mocha+karma executing in Chrome. I remember arguing that using the same JS environment as production along with a real DOM for tests makes me feel safer.

After introducing enzyme (e.g. this issue), the test setup will become mocha+karma+jsdom executing in Chrome, since enzyme has a hard dependency on jsdom. So we have a real non-Node JS environment, a real DOM, but now we're executing jsdom inside Chrome.

Gonna want to keep a close eye on enzymejs/enzyme#159 which would update enzyme to use a real DOM if it can find one. It'll be a major version bump bringing it up to 2.0.

edit: I opened #151 to track this.

[jbinto]

Fixed in #150.

[mxstbr]

Thanks for digging that deep into this and getting it back, amazing work!!

---

@jongold we got chai-enzyme back!

@vesln we got chai-enzyme working here, you might want to check

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.