Enzyme: Enzyme Internal Error: unknown node with tag 0

[0xc0d3r]

Current behavior

Gettting an error Enzyme Internal Error: unknown node with tag 0

Expected behavior

As I'm using updated versions, this issue shouldn't be occured.

Example

import React from 'react'
import expect from 'expect'
import { configure, mount } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16.3'
import { Provider } from 'mobx-react'
import { Router } from 'react-router-dom'

import stores from '../../stores'
import history from '../../utils/History'

import LoginPage from './index'

configure({ adapter: new Adapter() })

describe('LoginPage', () => {
  it('Rendered LoginPage', () => {
    const LoginPageContainer = mount(
      <Router history={history}>
        <Provider authStore={stores.authStore}>
          <LoginPage />
        </Provider>
      </Router>
    )
    expect(LoginPageContainer).toMatchSnapshot()
  })
})

Your environment

API

• [ ] shallow
• [x] mount
• [ ] render

Version

| library | version
| ------------------- | -------
| enzyme | 3.8.0
| react | 16.6.1
| react-dom | 16.6.1
| react-test-renderer | 16.6.1
| adapter (below) |

Adapter

• [x] enzyme-adapter-react-16
• [ ] enzyme-adapter-react-16.3
• [ ] enzyme-adapter-react-16.2
• [ ] enzyme-adapter-react-16.1
• [ ] enzyme-adapter-react-15
• [ ] enzyme-adapter-react-15.4
• [ ] enzyme-adapter-react-14
• [ ] enzyme-adapter-react-13
• [ ] enzyme-adapter-react-helper
• [ ] others ( )

[kiliancs]

Experiencing the same problem.

[ljharb]

What is the code for LoginPage?

Note that you're using the v16.3 adapter with React v16.6 - not only are you required to use a compatible adapter, but many React 16.6 features don't yet work in enzyme. Can you try switching to enzyme-adapter-react-16?

[kiliancs]

I was getting the same error with enzyme-adapter-react-16. Like you said, it seems like enzyme simply doesn't yet support React 16.6 regardless of the adapter.

[ljharb]

@kiliancs can you share your component code? It's specific 16.6 features that don't work - lazy, Suspense, things like that.

[kiliancs]

The error:

  ● AnomalyDescription › should render simple markdown without adding spans

    Enzyme Internal Error: unknown node with tag 0

      69 |     });
      70 |     it('should render simple markdown without adding spans', () => {
    > 71 |         const wrapper = mount(
         |                         ^
      72 |             <AnomalyDescription description={testMarkdown} />,
      73 |         );
      74 |         const threatSpans = wrapper.find(

      at toTree (node_modules/enzyme-adapter-react-16.3/build/ReactSixteenThreeAdapter.js:221:13)
      at childrenToTree (node_modules/enzyme-adapter-react-16.3/build/ReactSixteenThreeAdapter.js:234:12)
      at toTree (node_modules/enzyme-adapter-react-16.3/build/ReactSixteenThreeAdapter.js:180:19)
      at Object.getNode (node_modules/enzyme-adapter-react-16.3/build/ReactSixteenThreeAdapter.js:335:33)
      at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:136:44)
      at Object.mount (node_modules/enzyme/build/mount.js:21:10)
      at Object.it (test/anomalies/components/AnomalyCard.spec.tsx:71:25)

I can't share the code but we are not using lazy, suspense nor anything new. Literally I was only trying to upgrade React from 16.3.1 (which was working with the enzyme-adapter-react-16 adapter, not the 16.3 one), with no changes in our source code. I got this error and tried upgrading enzyme and switching to enzyme-adapter-react-16.3 but, as explained, we face the same error.

I will try to find what the components for which mount fails have in common.

[ljharb]

Thanks - given your situation I'd absolutely expect everything to work. Can you try (on the same 16 adapter) on React 16.4, 16.5, and 16.6? That would really help narrow it down.

[kiliancs]

I was able to resolve this by using enzyme-adapter-react-16 v1.7.1. I guess I had jumped directly to enzyme-adapter-react-16.3 without thinking of simply upgrading enzyme-adapter-react-16.

There is one test that passed before this upgrade, but I guess that would be a different issue to file.

[0xc0d3r]

@kiliancs can you share your component code? It's specific 16.6 _features_ that don't work - lazy, Suspense, things like that.

I'm not using React 16.6 features like lazy, Suspense. I tried with adapter 1.1.1 version also but no luck. Now I'm trying to update the adapter to v1.7.1

[0xc0d3r]

@ljharb

Environment

React - 16.6.1
enzyme - 3.8.0
enzyme-adapter-react-16 - 1.7.1

When I ran the test case, it's not exiting.

RUNS  src/containers/LoginPage/index.test.js

@kiliancs Am I missing anything?

[ljharb]

@0xc0d3r thanks - can you provide the code for the LoginPage component?

[kiliancs]

@0xc0d3r you changed your adapter import that you are passing to Enzyme.configure? I suppose you did, and If so, I have no idea.

Regarding my remaining failing test, and just for posterity, it looks like there is a slight difference between when React and enzyme trigger getDerivedStateFromProps in relation to setState.

The relevant test code:

        button.simulate('click');
        // verify the new one shows up
        selectors = wrapper.find(SourceInput);
        expect(selectors.length).toEqual(4);

This component has state, which determines how many SourceInputs will be rendered. Clicking on the button adds a new entry, so an additional SourceInput should then be rendered. getDerivedStateFromProps is also setting state.

In the browser as well as in previous versions of enzyme I get 4 selectors in the end (test passes), while with enzyme v3.8.0 and enzyme-adapter-react-16 v1.7.1, it doesn't.

That said, I'm actually happy enzyme is making this test fail because this component shouldn't be using getDerivedStateFromProps and it's almost a miracle that it works in the browser. Keep components simple, people!

Thanks for being there @ljharb

[0xc0d3r]

@0xc0d3r thanks - can you provide the code for the LoginPage component?

@ljharb Sorry! I can't share the code but it has only two form fields and a submit button wrapped in a LoginForm component

[0xc0d3r]

@0xc0d3r you changed your adapter import that you are passing to Enzyme.configure? I suppose you did, and If so, I have no idea.

Regarding my remaining failing test, and just for posterity, it looks like there is a slight difference between when React and enzyme trigger getDerivedStateFromProps in relation to setState.

The relevant test code:

        button.simulate('click');
        // verify the new one shows up
        selectors = wrapper.find(SourceInput);
        expect(selectors.length).toEqual(4);

This component has state, which determines how many SourceInputs will be rendered. Clicking on the button adds a new entry, so an additional SourceInput should then be rendered. getDerivedStateFromProps is also setting state.

In the browser as well as in previous versions of enzyme I get 4 selectors in the end (test passes), while with enzyme v3.8.0 and enzyme-adapter-react-16 v1.7.1, it doesn't.

That said, I'm actually happy enzyme is making this test fail because this component shouldn't be using getDerivedStateFromProps and it's almost a miracle that it works in the browser. Keep components simple, people!

Thanks for being there @ljharb

@kiliancs I changed the adapter import statement but still getting the same error.

[ljharb]

Without a repro case, I'm not sure how I can identify or fix the problem.

@0xc0d3r if it's just two form fields and a submit button, it should hopefully be pretty trivial to make a repro repo?

[villermen]

This issue started occurring for me after I started using React.forwardRef without updating enzyme-adapter-react-16. I updated the adapter from v1.1.1 to v1.7.1, which fixed the issue.

You seem to be using adapter-react-16.3 while your reported React version >= 16.4. That's probably what's causing the issue, and it most likely is resolved by changing to enzyme-adapter-react-16.

[tenorok]

Fixed for me after update to versions below:

"enzyme": "3.8.0",
"enzyme-adapter-react-16": "1.9.1",

[ljharb]

I'm going to close for now; if the failure can be reproduced I'm more than happy to reopen.

[0xc0d3r]

I'm going to close for now; if the failure can be reproduced I'm more than happy to reopen.

Currently, I'm working on other things. I will try to reproduce it in a separate repo and let you know.

Thanks!

[utsavnarayan]

This happened to me as well. The issues was with my Button component.

I had renamed the input props to Button component but had forgotten to change the name everywhere. Sample code change
Before:

<Button
 className="something"
/>

After:

<Button
 customClassName="something"
/>