chai-enzyme can not work with enzyme 3.0 and react 16.0.0

[linchen2chris]

it will give error cannot find module 'enzyme/build/react-compat.js'

[ljharb]

See #196 and #198.

[linchen2chris]

@ljharb Thanks for your reply. 👍

[ninjasort]

Having the same issue.

[dschinkel]

same error, please fix this.

[dschinkel]

@ljharb I looked at the two related issues you stated but don't see what I should be doing here...are we waiting for a PR for a fix? OR is there a workaround for the time being? Wasn't sure if you worked on this project or if it's solely supported by airbnb but thought you'd know :).

[ljharb]

Yes, we're waiting on a PR; it's not solely supported by airbnb; and there's no workaround for the time being (besides "stay on enzyme 2" or "don't use chai-enzyme until it's ready")

[dschinkel]

thanks @ljharb

[ayrton]

Will try to release a beta 1.0.0 release tomorrow with support for enzyme 3 (& thus react 16). Once things look stable (I'll test the library against the Product Hunt test suite) will release the 1.0.0

[ayrton]

Just released the new version as a beta, to try it out

yarn add chai-enzyme@beta

[ayrton]

I'm seeing quite some failing tests in my test suite with the following message:

Invariant Violation: Wrapper(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

With the following stacktrace:

      at reactNodeToString (node_modules/chai-enzyme/build/reactNodeToString.js:38:12)
      at Assertion.contain (node_modules/chai-enzyme/build/assertions/contain.js:20:55)
      at Assertion.<anonymous> (node_modules/chai-enzyme/build/ChaiWrapper.js:135:19)

Is this also the case for others?

[modosc]

can you relax the peerDeps on cheerio since enyme-3.x lists cheerio "^1.0.0-rc.2" as a dep? happy to do the pr again for this if needed.

[ljharb]

Certainly the peer dep here should match enzyme's. A PR would be great.

[modosc]

#201

[VidyullathaKandipati]

Is the Invarient Violation error resolved? I am still seeing it in my tests, when I do the following assertion.

expect(componentWithString).to.contain('some string');

[linchen2chris]

@ljharb I tried chai-enzyme@beta this morning, our project contains 600 unit tests(include 257 react compont tests, others are action, store, validation tests), all tests work correctly.

For the security policy reason, I can't attach the screenshot.

[ayrton]

@ljharb @linchen2chris we're running on chai-enzyme@beta now too, there were only a couple necessary changes needed in our codebase

-    wrapper.find('[data-test="save-topics"]').simulate('click');
+    wrapper
+      .find('[data-test="save-topics"]')
+      .first()
+      .simulate('click');

-    const input = wrapper.find('input').get(0);
+    const input = wrapper.instance().input;

[linchen2chris]

@ayrton we‘re lucky, the apis we used didn't change. 😀

[palaniichukdmytro]

After migration to enzyme I catch the error when start testing, also I use chai 4.1.2 and chay-enzyme "^1.0.0-beta.0" with React 16,

it.only('should render icon with correct style', () => {
            props.icon.props.style.should.be.deep.equal(iconPropsStyle)
        })

all my casse failed on should.be.deep.equal

Warning: React depends on requestAnimationFrame. Make sure that you load a polyfill in older browsers. http://fb.me/react-polyfills


  !

  0 passing (206ms)
  1 failing

  1) <Button/>
       with icon
         should render icon with correct style:
     ReferenceError: HTMLElement is not defined
      at typeDetect (node_modules\type-detect\index.js:163:24)
      at extensiveDeepEqual (node_modules\deep-eql\index.js:183:22)
      at Object.deepEqual [as eql] (node_modules\deep-eql\index.js:106:10)
      at Proxy.assertEql (node_modules\chai\lib\chai\core\assertions.js:1081:11)
      at Proxy.methodWrapper (node_modules\chai\lib\chai\utils\addMethod.js:57:25)
      at Proxy.assertEqual (node_modules\chai\lib\chai\core\assertions.js:1020:19)
      at Proxy.methodWrapper (node_modules\chai\lib\chai\utils\addMethod.js:57:25)
      at Context.<anonymous> (C:/Users/d.palaniichuk/Documents/react-components/test/Button/Button-test.js:80:51)

[ljharb]

@palaniichukdmytro does it pass on enzyme 3 and react 15?

Regardless; it looks like the issue is that you’re not using jsdom.

[palaniichukdmytro]

@ljharb no I use enzyme 3.x and react 16, I use jsdom, with old/api, also there is still issue with HTMLElement is not defined, I've already solved it, but not quite understand why it happend,
global.HTMLElement = () => {}

[ljharb]

If you use jsdom, all the browser globals will be provided; you don't want to have to provide them all one at a time manually.