Enzyme: Babel plugin missing after upgrading to v3

[Fatxx]

While executing tests using jest I'm facing the following error after upgrade to v3:
ReferenceError: Unknown plugin "transform-replace-object-assign" specified in "${pathToProject}/node_modules/enzyme/.babelrc" at 0, attempted to resolve relative to "${pathToProject}/node_modules/enzyme"

package.json:

"scripts": {
...
"test": "node node_modules/jest/bin/jest.js --setupTestFrameworkScriptFile=./App/__tests__/setupTests.js --watch",
...
},
"dependencies": {
     "react": "^16.0.0",
    "react-native": "^0.47.2",
},
"devDependecies": {
    "babel-preset-react-native": "^2.1.0",
    "enzyme": "^3.0.0",
    "enzyme-adapter-react-16": "^1.0.0",
    "jest": "^20.0.4",
}

setupTests.js:

import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

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

Anyone facing this or any clue how to solve it?

[lelandrichardson]

sigh. this is from react native's terrible behavior of transpiling node_modules. This is probably indicative of us now not npm ignoring our .babelrc file, whereas we used to before.

In the short term, you might be able to configure jest to ignore certain modules... i don't remember how to do that but some googling might uncover something. Or you can just manually delete the babelrc in enzyme and enzyme-adapter-react-16 node_modules folders.

[Fatxx]

@lelandrichardson thanks for your fast response.

You mean this:

"jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(?!react-native|react-navigation|core-js)/"
    ]
  }

Probably? Uhm manually deleting doesn't seem an option for teams I believe.

[ljharb]

@Fatxx manually deleting is fine if you do it as a postinstall script; if RNP still is broken and babel-transpiles node_modules, then you'd want to delete every .babelrc inside it.

[Fatxx]

Uhm I see, as @skovhus pointed out here: https://github.com/airbnb/enzyme/issues/928#issuecomment-332600059

[lelandrichardson]

@Fatxx for reference, airbnb does the following in our react native code base in a postinstall script:

(find node_modules -type f -name .babelrc | grep -v /react-native/ | xargs rm) || true

super hacky, but the bug lies with react native, not with enzyme... although I will consider adding the babelrcs to the npmignore in the next release anyway in order to make consuming enzyme easier for people.

[skovhus]

Yeah adding the following to your package.json does the trick (for now)...

"postinstall": "rm -f node_modules/enzyme/.babelrc"

But seems this might have been fixed in newer version of react-native... Haven't tested this.

[lelandrichardson]

going to place the v3 bugs label back on this issue. I don't think this was an expected difference between v2 and v3, though calling it a "bug" is a bit of a stretch, it's still something i'd like to fix on our end so this label will remind me.

[Fatxx]

@lelandrichardson that script worked! @skovhus. Thank you both 👍

[asBrettisay]

Having this issue also using karma testrunner, and the script mentioned above does not work.

[lelandrichardson]

This is hopefully fixed in enzyme-adapter-react-{version}@1.0.1 and [email protected]. Please upgrade and let us know if it does not fix your issue. Thanks!