Enzyme 3 support #63

nickmccurdy · 2017-08-13T22:26:09Z

I get this error in all my test suites using enzyme-to-json@1.5.1, enzyme@3.0.0-alpha.1 (unmet peer dependency), and react@16.0.0-beta.5 (unmet peer dependency).

    Cannot find module 'enzyme/build/ShallowTraversal' from 'shallow.js'
      
      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:179:17)
      at Object.<anonymous> (node_modules/enzyme-to-json/build/shallow.js:25:25)

While it's clear to me that the peer dependencies are intentionally not supporting these unstable versions yet, it would be helpful to start working on support in a prerelease so projects testing React 16 and projects forced to use it because of React Native can continue to use this project until React and Enzyme are stable.

The text was updated successfully, but these errors were encountered:

adriantoine · 2017-09-15T10:52:12Z

Hi!

That's interesting, I'll have a look.
Thanks for raising the issue.

andrewjmead · 2017-09-18T00:54:48Z

Just an FYI, I'm seeing the same issue with the more recent beta/rc versions. I was using enzyme@3.0.0-beta.5, enzyme-to-json@2.0.0, and react@16.0.0-rc.3.

Edit: I also found the commit in enzyme where enzyme/src/ShallowTraversal.js was removed. It's here. The file was renamed to enzyme/src/RSTTraversal.js here.

Edit 2: Changing up this line from "ShallowTraversal" to "RSTTraversal" gets past the initial error and brings up an error with the next line: Cannot find module 'enzyme/build/react-compat' from 'shallow.js'. It seems the v13 compatibility adapter was also deleted in that commit and moved to a separate library enzyme-adapter-react-13.

Edit 3: I was able to fix all issues by removing React v13 compatibility from the library. I understand might not be the direction you want to head in, but hopefully this info helps.

I'd be happy to contribute towards fixing this one.

adriantoine · 2017-09-18T13:18:33Z

Just as I told @andrewjmead and to let everyone know, I'm currently working on Enzyme 3 compatibility, it's actually not bad at all and the code is much simpler.

Everything is in the enzyme3 branch if you want to check it out, I'll hopefully release a beta version of enzyme-to-json in the day.

adriantoine · 2017-09-18T14:40:01Z

I will close this for now and you can find more information about the progress of the next version there: #67.

You can test the beta:

npm install --save-dev enzyme-to-json@next

andrewjmead · 2017-09-18T15:06:04Z

Awesome. This fixed all the issues I was seeing when using:

enzyme@3.0.0-beta.5
enzyme-adapter-react-16@1.0.0-beta.5
react@16.0.0-rc.3
react-dom@16.0.0-rc.3

adriantoine · 2017-09-18T16:04:09Z

@andrewjmead nice! That would be cool if people could test it with React 16 and Enzyme 3 on a larger codebase than my unit tests.

kirill-kruchkov · 2017-09-19T07:53:13Z

Hello! I try to use this update, but encounter couple issues.

First:

UNMET PEER DEPENDENCY react-dom@15.6.1 invalid
UNMET PEER DEPENDENCY react-test-renderer@15.6.1 invalid

When I have both @16.0.0-rc3.

And when I use it with jest I get only shallow snapshots like this:

<View>
 <undefined />
</View>

Is there a way to configure it?

adriantoine · 2017-09-19T08:06:25Z

Hi @kirill-kruchkov!

Thanks for trying out!

For the first issue, that's probably not because of enzyme-to-json because we don't have a peerDependency on React, only on Enzyme.

For the second issue, mmh are you sure you are using Enzyme 3? Can you show more details about your setup?

Thanks!

kirill-kruchkov · 2017-09-19T08:11:10Z

@adriantoine hi!

Thanks for your response!

It's like this:

"dependencies": {
  ...
  "react": "^16.0.0-rc.3",
  "react-native": "^0.47.2",
  ...
},
"devDependencies": {
  "enzyme": "^3.0.0-beta.5",
  "enzyme-adapter-react-16": "^1.0.0-beta.5",
  "enzyme-to-json": "^3.0.0-beta2",
},
"jest": {
  "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ],
}
...

And jest setup looks like:

const Adapter = require('enzyme-adapter-react-16')
const Enzyme = require('enzyme')

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

adriantoine · 2017-09-19T08:14:17Z

Ok thanks, I will try it out on a small repo!

adriantoine · 2017-09-19T10:57:50Z

@kirill-kruchkov I have just published a small test repo: https://github.com/adriantoine/enzyme-to-json-v3-testing

As you can see all the snapshots are looking good so I can't reproduce your issue even though I tried different cases (function component, class component, component including other components).

Can you provide more details about your use case or provide a small repo like mine where you can reproduce the issue?

Thanks!

kirill-kruchkov · 2017-09-19T11:57:05Z

@adriantoine thank you! Sorry I can't check it and make a repro right now, but I hope I'll have a chance to do it this evening. Will report the result here!

adriantoine · 2017-09-19T12:04:59Z

@kirill-kruchkov no problem!

kirill-kruchkov · 2017-09-19T20:26:48Z

@adriantoine so I see it works fine with react for web, but I try to make it work for react-native 0.47.2. Maybe this is the reason we get different results. Let me come back later with a minimum repo to reproduce.

adriantoine · 2017-09-19T21:02:34Z

@kirill-kruchkov that's interesting, I'm not a react-native user, can you provide a small repo with react-native so that I can test and fix? Thanks!

kirill-kruchkov · 2017-09-20T08:05:53Z

@adriantoine I created a small repo (https://github.com/kirill-kruchkov/enzyme-to-json-v3-react-native-test) to try it but it seems like it all works fine! So I'm sorry for bothering you with this! Probably the error is somewhere else in my code.

kirill-kruchkov · 2017-09-20T08:13:04Z

@adriantoine oh no, sorry again :-D Actually I reproduced it. Please check out this repo: https://github.com/kirill-kruchkov/enzyme-to-json-v3-react-native-test
(App.js and index.ios.js)

Turns out it saves <undefined /> to snapshot if the boolean here is false:

{bool && <Text>Something</Text>}

adriantoine · 2017-09-20T08:34:56Z

@kirill-kruchkov thank you very much, I'm looking into it!

adriantoine · 2017-09-20T08:56:59Z

That's a good catch, for some reason it returns an undefined type for {isError && <Text>Has Error!</Text>} when isError is false.

{ type: 'View',
  props:
    { style:
      { flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF' } },
  children:
    [ { type: 'Text',
        props: [Object],
        children: [Array],
        '$$typeof': Symbol(react.test.json) },
      { type: 'Text',
        props: [Object],
        children: [Array],
        '$$typeof': Symbol(react.test.json) },
      { type: 'Text',
        props: [Object],
        children: [Array],
        '$$typeof': Symbol(react.test.json) },
      { type: 'MyComponent',
        props: {},
        children: [Array],
        '$$typeof': Symbol(react.test.json) },
      { type: undefined, // ???
        props: {},
        children: null,
        '$$typeof': Symbol(react.test.json) } ],
  '$$typeof': Symbol(react.test.json) }

I'll have a look.

adriantoine · 2017-09-20T09:19:03Z

@kirill-kruchkov it should be fixed in v3.0.0-beta6, can you give it a try?

kirill-kruchkov · 2017-09-20T11:04:25Z

@adriantoine I tried it and now it's fine!
I have wrapper.instance() === null in one case, but I think it has to do with Enzyme itself.

Thank you a lot! Really appreciate your responsiveness!

FezVrasta · 2017-09-27T14:46:46Z

I still get this error on one of my projects.
One based on the latest create-react-app worked just fine after the upgrade, the one based on an older version + ejected doesn't want to work.

Ideas?

adriantoine · 2017-09-27T15:15:26Z

Hey @FezVrasta, can you give more details? Can you make sure all the versions are correct? enzyme-to-json@3.0.0 with enzyme@3.0.0 (or above). You're taking about this error

   Cannot find module 'enzyme/build/ShallowTraversal' from 'shallow.js'
      
      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:179:17)
      at Object.<anonymous> (node_modules/enzyme-to-json/build/shallow.js:25:25)

right?

FezVrasta · 2017-09-27T15:16:58Z

I actually get only this part:

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

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:191:17)

I have latest of enzyme, enzyme-to-json, react, react-dom, react-test-renderer, react-dev-utils, jest-enzyme, jest, enzyme-adapter-react-16 and babel-jest

adriantoine · 2017-09-27T15:20:55Z

Mmh that's really strange, this import has gone in v3.0.0 so there must be an old version of enzyme-to-json that is used somewhere. Have you tried deleting node_modules and reinstalling?

FezVrasta · 2017-09-27T15:24:45Z

yes I already delete node_modules, anyway now that I look at the yarn.lock I see that both 3.0.1 and 1.5.1 are resolved.

1.5.1 seems to be required by jest-enzime 3.8.3 (which is the latest) 🤔

edit, and actually, I don't seem to have jest-enzyme in the project that works properly.

FezVrasta · 2017-09-27T15:28:07Z

Ok removing jest-enzyme everything works, I guess it needs an update 🙂

And here it is the existing issue:
enzymejs/enzyme-matchers#160

adriantoine · 2017-09-27T15:30:58Z

I'm glad to hear you solved your issue! @FezVrasta

adriantoine · 2017-09-27T15:40:06Z

Yeah it seems jest-enzyme is still using enzyme-to-json@1.5.0 which explains why you had the error.

I'm sure @blainekasten will upgrade his library very soon to work with Enzyme v3, in my case it wasn't too hard, I ended up with a much simpler code.

blainekasten · 2017-09-27T18:51:10Z

Hey guys, I am indeed working on an upgrade. Hoping to cut a release soon

Connorelsea · 2017-09-27T18:55:01Z

ETA on release @blainekasten? No rush at all, just wondering

blainekasten · 2017-09-27T18:56:04Z

Hopefully less than 15m

blainekasten · 2017-09-27T19:19:43Z

Just release 4.0.0 ! Give it a try!

henrique1977 · 2017-09-28T15:30:45Z

Were you guys able to make this work? I'm still having the same issue. Using jest-enzyme 4.0.0 but still having the same issue. Anyone know what I'm doing wrong?

"devDependencies": {
"babel-jest": "21.2.0",
"babel-preset-react-native": "4.0.0",
"enzyme": "^3.0.0",
"jest-enzyme": "^4.0.0",
"jest-serializer-enzyme": "^1.0.0",
"react-addons-test-utils": "^15.6.2",
"react-dom": "^16.0.0",
"react-test-renderer": "16.0.0-alpha.12"
},

the error I get:
Cannot find module 'enzyme/build/ShallowTraversal' from 'shallow.js'
at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:191:17)

Thank you, appreciate the help!

nickmccurdy · 2017-09-28T17:41:27Z

react-addons-test-utils is deprecated, use react-test-renderer/shallow instead. If that still doesn't work update to a stable version of react-test-renderer.

henrique1977 · 2017-09-28T17:46:39Z

@nickmccurdy Thank you for the response, i'm gonna try that!

adriantoine · 2017-09-28T18:28:22Z

@henrique1977 you should use enzyme-to-json/serializer instead of jest-serializer-enzyme.

jest-serializer-enzyme is only forwarding to an old version of enzyme-to-json.

henrique1977 · 2017-09-28T19:13:34Z

It's working for me now!
Thank you @adriantoine for the response!

After trying a lot of different things, this is what I have in my package:
"devDependencies": {
"babel-jest": "21.2.0",
"babel-preset-react-native": "4.0.0",
"enzyme": "^2.9.1",
"enzyme-to-json": "^1.5.1",
"jest": "^21.0.1",
"jest-enzyme": "^3.8.2",
"react-dom": "16.0.0-beta.5",
"react-test-renderer": "16.0.0-beta.5"
},

so my enzyme is now "enzyme": "^2.9.1",
and I'm not using the serializer, which I don't even know what it does.

But, I get no errors and I'm using shallow
import { shallow } from 'enzyme';

with no issues.

Thank you!!

ghoshabhi · 2017-10-25T20:38:42Z

@henrique1977 Thank you for posting the list of package versions! I resolved all my errors using that. I am also posting here the complete list of packages and config:

"dependencies": {
    "axios": "^0.16.2",
    "prop-types": "^15.6.0",
    "ramda": "^0.25.0",
    "react": "16.0.0-beta.5",
    "react-native": "0.49.3",
    "react-native-navigation": "git://github.com/himanshusoni/react-native-navigation.git",
    "react-native-open-maps": "^0.1.1",
    "react-redux": "^5.0.5",
    "redux": "^3.7.2",
    "redux-form": "^7.1.1",
    "redux-persist": "^4.8.3",
    "redux-thunk": "^2.2.0",
    "remote-redux-devtools": "^0.5.12",
    "reselect": "^3.0.1",
    "styled-components": "^2.2.1"
  },
  "devDependencies": {
    "babel-eslint": "^7.2.3",
    "babel-jest": "21.2.0",
    "babel-preset-react-native": "4.0.0",
    "enzyme": "2.9.1",
    "enzyme-to-json": "^1.5.1",
    "eslint": "^4.6.1",
    "eslint-config-airbnb": "^15.1.0",
    "eslint-import-resolver-babel-module": "^3.0.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.1.0",
    "husky": "^0.14.3",
    "jest": "21.0.1",
    "jest-enzyme": "^3.8.2",    
    "jest-serializer-enzyme": "^1.0.0",
    "lint-staged": "^4.1.3",
    "prettier-eslint": "^7.1.0",
    "prettier-eslint-cli": "^4.3.2",
    "react-addons-test-utils": "^15.6.2",
    "react-dom": "^16.0.0-beta.5",
    "react-test-renderer": "16.0.0-beta.5"
  },
  "jest": {
    "preset": "react-native",
    "testPathIgnorePatterns": [
      "<rootDir>/node_modules/"
    ],
    "snapshotSerializers": [
      "./node_modules/jest-serializer-enzyme"
    ]
  },

saadaouad · 2018-02-16T17:42:44Z

This should fix the problem:

package.json

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

test.spec.js

import {configure} from 'enzyme';
// If you are using react^15
import Adapter from 'enzyme-adapter-react-15';
// If you are using react^16
import Adapter from 'enzyme-adapter-react-16';

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

es1o · 2018-03-10T15:35:13Z

I have the same problem and I don't know how to resolve it.
It is my package.json file:

{
  "name": "Apppp",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "babel-jest": "^22.4.1",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "jest": "^22.4.2",
    "jest-enzyme": "^5.0.3",
    "jest-expo": "25.0.0",
    "jest-serializer-enzyme": "^1.0.0",
    "react-addons-test-utils": "^15.6.2",
    "react-dom": "^16.2.0",
    "react-native-mock": "^0.3.1",
    "react-native-scripts": "1.11.1",
    "react-test-renderer": "^16.2.0"
  },
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": {
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "node node_modules/jest/bin/jest.js"
  },
  "jest": {
    "preset": "react-native",
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ]
  },
  "dependencies": {
    "expo": "^25.0.0",
    "react": "16.2.0",
    "react-native": "0.52.0"
  }
}

It worked before but after remove everything from node_modules it doesn't.

I'm trying to run npm test for my react native app.
My test code:

import React from 'react';
import App from './App';

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

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

import renderer from 'react-test-renderer';
import { shallow, mount, render } from 'enzyme';

it('renders without crashing', () => {
  const rendered = renderer.create(<App />).toJSON();
  expect(rendered).toMatchSnapshot();
});

it('should render without throwing an error', function() {
  const wrapper = shallow(<App />);
  const refreshData = () => jest.fn();
  expect(wrapper.find('#refreshButton')).toHaveLength(1);
  wrapper.find('#refreshButton').simulate('click');
});

adriantoine added the enhancement label Aug 19, 2017

adriantoine mentioned this issue Sep 18, 2017

Version 3.0 (Enzyme 3 and React 16 compatibility) #67

Closed

12 tasks

adriantoine closed this as completed Sep 18, 2017

adriantoine mentioned this issue Sep 28, 2017

Update enzyme-to-json dependecy to 3.0.0 rogeliog/jest-serializer-enzyme#15

Open

cyberhck mentioned this issue Oct 23, 2017

Cannot find module 'enzyme/build/ShallowTraversal' from 'shallow.js' enzymejs/enzyme-matchers#170

Closed

Enzyme 3 support #63

Enzyme 3 support #63

Comments

nickmccurdy commented Aug 13, 2017 • edited Loading

adriantoine commented Sep 15, 2017

andrewjmead commented Sep 18, 2017 • edited Loading

adriantoine commented Sep 18, 2017 • edited Loading

adriantoine commented Sep 18, 2017

andrewjmead commented Sep 18, 2017

adriantoine commented Sep 18, 2017 • edited Loading

kirill-kruchkov commented Sep 19, 2017 • edited Loading

adriantoine commented Sep 19, 2017

kirill-kruchkov commented Sep 19, 2017

adriantoine commented Sep 19, 2017

adriantoine commented Sep 19, 2017 • edited Loading

kirill-kruchkov commented Sep 19, 2017 • edited Loading

adriantoine commented Sep 19, 2017

kirill-kruchkov commented Sep 19, 2017

adriantoine commented Sep 19, 2017

kirill-kruchkov commented Sep 20, 2017

kirill-kruchkov commented Sep 20, 2017 • edited Loading

adriantoine commented Sep 20, 2017

adriantoine commented Sep 20, 2017 • edited Loading

adriantoine commented Sep 20, 2017

kirill-kruchkov commented Sep 20, 2017

FezVrasta commented Sep 27, 2017

adriantoine commented Sep 27, 2017

FezVrasta commented Sep 27, 2017

adriantoine commented Sep 27, 2017

FezVrasta commented Sep 27, 2017 • edited Loading

FezVrasta commented Sep 27, 2017 • edited Loading

adriantoine commented Sep 27, 2017

adriantoine commented Sep 27, 2017 • edited Loading

blainekasten commented Sep 27, 2017

Connorelsea commented Sep 27, 2017

blainekasten commented Sep 27, 2017

blainekasten commented Sep 27, 2017

henrique1977 commented Sep 28, 2017 • edited Loading

nickmccurdy commented Sep 28, 2017

henrique1977 commented Sep 28, 2017

adriantoine commented Sep 28, 2017

henrique1977 commented Sep 28, 2017

ghoshabhi commented Oct 25, 2017

saadaouad commented Feb 16, 2018

package.json

test.spec.js

es1o commented Mar 10, 2018

nickmccurdy commented Aug 13, 2017 •

edited

Loading

andrewjmead commented Sep 18, 2017 •

edited

Loading

adriantoine commented Sep 18, 2017 •

edited

Loading

adriantoine commented Sep 18, 2017 •

edited

Loading

kirill-kruchkov commented Sep 19, 2017 •

edited

Loading

adriantoine commented Sep 19, 2017 •

edited

Loading

kirill-kruchkov commented Sep 19, 2017 •

edited

Loading

kirill-kruchkov commented Sep 20, 2017 •

edited

Loading

adriantoine commented Sep 20, 2017 •

edited

Loading

FezVrasta commented Sep 27, 2017 •

edited

Loading

FezVrasta commented Sep 27, 2017 •

edited

Loading

adriantoine commented Sep 27, 2017 •

edited

Loading

henrique1977 commented Sep 28, 2017 •

edited

Loading