Cannot find module 'enzyme/build/ShallowTraversal' from 'shallow.js'

[willdurand]

Hi,

Our test suite is now failing with the following error (Greenkeeper PR to upgrade from 2.9.1 to 3.0.0):

FAIL tests/unit/core/TestInstallAddon.js

  ● Test suite failed to run

    Cannot find module 'enzyme/build/ShallowTraversal' from 'shallow.js'

      
      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:192:17)
      at Object.<anonymous> (node_modules/enzyme-to-json/build/shallow.js:25:25)

Is it something you are aware of? I thought that was because we did not have any adapter configured (cf. migration guide) but configuring one gave the same error locally, it seems. I did not find anything related to this error message so I am not sure what to do yet.

Thanks.

[ljharb]

It's likely that enzyme-to-json is not yet compatible with v3. It should be declaring a peer dep that should now be making npm ls exit nonzero.

[actraiser]

@willdurand have you tried the enzyme-to-json 3.0.0 beta? It should provide Enzyme 3 and React 16 compatibility.

yarn add enzyme-to-json@3.0.0-beta6 --dev

-act

[ljharb]

@actraiser enzyme v3.0 is now released, so no need for the beta.

[willdurand]

Interesting, no I did not try the beta version of enzyme-to-json (yet) because we actually do not explicitly require this dependency. I have to find where this comes from first.

This issue is not related to Enzyme per se so feel free to close it. Thanks both for your time/help!

[actraiser]

@ljharb for the sake of clarity, I was referring to the package enzyme-to-json.

[ljharb]

@actraiser aha, thanks for clarifying :-) my mistake,

@willdurand thanks, closing.

[hipertracker]

It does not work. I have the official React 16 and Enzyme 3 and I have no idea how and where to define Enzyme adapter. In the beginning of every unit test? In package.json? Is there ANY working example how to write a test using Enzyme, Jest and React 16?

import { App } from './index'
import Enzyme, { shallow } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import 'jest-enzyme'
import React from 'react'
Enzyme.configure({adapter: new Adapter()}) // ????

describe('<App/>', () => {
  it('renders without crashing', () => {
    shallow(<App/>)
  })
})

And again...

Cannot find module 'enzyme/build/ShallowTraversal' from 'shallow.js'

In my package.json

  "devDependencies": {
    "enzyme": "^3.0.0",
    "enzyme-adapter-react-16": "^1.0.0",
    "jest-enzyme": "^3.8.3",
    "raf": "^3.3.2",
    "react-test-renderer": "^16.0.0"
  }

[aweary]

@hipertracker please refer to the migration guide. The issue you're seeing is because the jest-enzyme package does not work with v3 yet. See enzymejs/enzyme-matchers#160.

[RIP21]

@aweary I double what @hipertracker saying. Where should we add these adapters? To each of the test? Or in some other place and import it? Or it will set enzyme config globally for all tests run. This part is very unclear.

[actraiser]

I am not sure if this is the best practise approach but what I did was to put an enzyme_setup.js file in my /helpers directory and included it in every script that requires enzyme with react.

helpers/enzyme_setup.js

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-15';

Enzyme.configure({ adapter: new Adapter() });

tests/Link/index.react.test.js

import React from 'react';
import renderer from 'react-test-renderer';
import { shallow } from 'enzyme';
import Link from '<somewhere>';

// connects react 15.5 enzyme-adapter which is required since Enzyme 3.0.0
require('./../../helpers/enzyme_setup');

describe('React Components', () => {
  describe('Link', () => { 
[....etc...]

This works fine for me. If there is a different better approach, let me know.

-act

[RIP21]

@actraiser you can use import './../../helpers/enzyme_setup' instead of require though. If I'm not wrong.

[willdurand]

Quick thoughts: I am pretty sure your test runner (eg. Jest) has an option to run a script before everything else (pre-hook or something like that). I'll put the adapter code in it instead of Importing it in all test files.

[RIP21]

Yes. You're correct I did it this way. But I just pointed out that in docs this is not 100% clear, so they better to improve that. On Sep 27, 2017 12:57, "William Durand" <notifications@github.com> wrote: Quick thoughts: I am pretty sure your test runner (eg. Jest) has an option to run a script before everything else (pre-hook or something like that). I'll put the adapter code in it instead of Importing it in all test files. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1143 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADwe77uWQuBi3z-oWadUjFfb1i4FJEcqks5smioKgaJpZM4PkGv6> .

[actraiser]

good point @willdurand - I moved it now into the jest configuration part of my package.json

  "jest": {
    "setupFiles": ["./src/helpers/enzyme_setup"],
     [...etc...]

-act

[blainekasten]

Just release jest-enzyme@4.0.0 for compatibility ! Give it a try!

[captain-yossarian]

When I'm run the test I have next Error:
SyntaxError: Unexpected token import
import react from 'react'
^^^^
My package.json

{
"name": "skew",
"version": "1.0.0",
"description": "just simple RWD page",
"main": "./src/index.js",
"scripts": {
"test": " jest --no-cache",
"build": "webpack --env production",
"start": "nodemon --watch webpack.config.js --exec "webpack-dev-server --content-base dist/ --env development" "
},
"jest": {
"transform": {
"\.js$": "babel-jest"
},
"collectCoverageFrom": [
"./src/components//test/.jsx",
"./src/components/.test.jsx",
"!./src/components//.scss",
"!./src/components/**/.png",
"!./src/components/**/*.jpg"
],
"testPathIgnorePatterns": [
"/node_modules/"
]
},
"repository": {
"type": "git",
"url": "git+https://github.com/SerhiiBilyk/skew.git"
},
"author": "SerhiiBilyk",
"license": "ISC",
"bugs": {
"url": "https://github.com/SerhiiBilyk/skew/issues"
},
"homepage": "https://github.com/SerhiiBilyk/skew#readme",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-jest": "^21.2.0",
"babel-loader": "^7.1.2",
"babel-plugin-styled-components": "^1.2.0",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-jest": "^21.2.0",
"babel-preset-react": "^6.24.1",
"babel-register": "^6.26.0",
"css-loader": "^0.28.7",
"enzyme": "^3.1.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"html-loader": "^0.5.1",
"html-webpack-plugin": "^2.30.1",
"jest": "^21.2.1",
"jest-enzyme": "^4.0.0",
"node-sass": "^4.5.3",
"nodemon": "^1.12.1",
"postcss-load-config": "^1.2.0",
"postcss-loader": "^2.0.6",
"postcss-plugin": "^1.0.0",
"react-test-renderer": "^16.0.0",
"sass-loader": "^6.0.6",
"sass-resources-loader": "^1.3.1",
"style-loader": "^0.18.2",
"styled-components": "^2.2.0",
"url-loader": "^0.5.9",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1",
"webpack-hot-middleware": "^2.19.1"
},
"dependencies": {
"react": "^16.0.0"
}
}

[ljharb]

If you're getting syntax errors then it's unrelated to enzyme.

I think we just had another issue with "skew" in the last day or three, which was also not related to enzyme.

[jchook]

Encountered this issue when upgrading an older project to Webpack 4.

For future Googlers, upgrading to the latest enzyme-to-json fixed my issue:

yarn add --dev enzyme-to-json

[grimunit]

Other future googlers who tried going to the latest enzyme-to-json and were still having the issue. If you are using jest-serializer-enzyme like we were, then you'll want to follow the advice in this thread and remove that dependency and just use the serializer that comes with enzyme-to-json.

[erick2014]

Yeah I got an error when tryng to use jest-serializer-enzyme, but if I use enzyme-to-json/serializer instead:

"snapshotSerializers": [
      "enzyme-to-json/serializer"
    ],

it works

[rimatla]

Thank you @grimunit & @erick2014