webpack/karma: react 16.8.6 causing test failures

Current behavior

Tests using mount from enzyme are failing, and we noticed that changing them to use shallow is fine.

Using mount produces the following error:

TypeError: Cannot read property '_reactInternalFiber' of null at getFiber (webpack:///node_modules/enzyme-adapter-react-16/build/detectFiberTags.js:50:0 <- packages/sh-search-2/test/src/index.js:41740:15) at detectFiberTags (webpack:///node_modules/enzyme-adapter-react-16/build/detectFiberTags.js:103:0 <- packages/sh-search-2/test/src/index.js:41793:17) at ReactSixteenAdapter.createMountRenderer (webpack:///node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:404:0 <- packages/sh-search-2/test/src/index.js:41096:56) at ReactSixteenAdapter.createRenderer (webpack:///node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:766:0 <- packages/sh-search-2/test/src/index.js:41458:25) at new ReactWrapper (webpack:///node_modules/enzyme/build/ReactWrapper.js:132:0 <- packages/sh-search-2/test/src/index.js:45064:30) at mount (webpack:///node_modules/enzyme/build/mount.js:21:0

I’ve tried changing react versions, but anything with 16.8.* causes these kinds of failures. Any help is much appreciated!

Expected behavior

Tests pass using mount.

Your environment

Using react with enzyme

API

• shallow
• mount
• render

Version

library	version
enzyme	3.9.0
react	16.8.6
react-dom	16.8.6
react-test-renderer	16.8.6
adapter (below)	1.12.1

Adapter

• enzyme-adapter-react-16

[binaryjunkie]

@howdyitshelena @ljharb I’m experiencing this with the following setup as well in my CRA 2.0/storybook setup. I’m at a loss after a day and a half of toying with versions. Only custom webpack config is in ./storybook folder as defined for use in a CRA 2.0 app. Open to any ideas, voodoo, human sacrifice, etc.

$ npm ls react react-dom enzyme enzyme-adapter-react-16 react-test-renderer

react-ui-components@0.2.20 C:\projects\react-ui-components
+-- @storybook/addon-info@5.0.11
| +-- @storybook/components@5.0.11
| | +-- react@16.8.6  deduped
| | '-- react-dom@16.8.6
| '-- react@16.8.6
+-- @storybook/react@5.0.11
| '-- @storybook/core@5.0.11
|   '-- @storybook/ui@5.0.11
|     +-- react@16.8.6  deduped
|     '-- react-dom@16.8.6  deduped
+-- enzyme@3.9.0
+-- enzyme-adapter-react-16@1.12.1
| '-- react-test-renderer@16.8.6  deduped
'-- react-test-renderer@16.8.6

src/setupTests.js

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

any.test.tsx

import React from 'react';
import { mount } from 'enzyme';

 it(`Works', () => {
    const wrapper=  mount(
      <div>_reactInternalFiber error occurs here</div>
    );
  });

yarn test

 FAIL  src/Filter/Filterable.test.tsx (7.292s)
  ● <Filterable /> › Displays correct number of unfiltered data items

    TypeError: Cannot read property '_reactInternalFiber' of null

      32 | 
      33 |   it('Displays correct number of unfiltered data items', () => {
    > 34 |     const wrapper = mount(<div>_reactInternalFiber error occurs here</div>);
         |                     ^
      35 |     expect(wrapper.find('div')).toHaveLength(1);
      36 |     // const wrapper = mount(
      37 |     //   <Filterable<string> data={data}>

      at _reactInternalFiber (node_modules/enzyme-adapter-react-16/src/detectFiberTags.js:14:15)
      at getFiber (node_modules/enzyme-adapter-react-16/src/detectFiberTags.js:45:15)
      at ReactSixteenAdapter.createMountRenderer (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:356:19)
      at ReactSixteenAdapter.createMountRenderer [as createRenderer] (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:632:51)
      at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:132:30)
      at mount (node_modules/enzyme/build/mount.js:21:10)
      at Object.it (src/Filter/Filterable.test.tsx:34:21)

[adolfius47]

Maybe you mocked react-dom? and you need to delete this: jest.mock(‘react-dom’);