forwardRef: Enzyme Internal Error: unknown node with tag 14

[DMShamonov]

Current behavior

After update React to 16.3.0 version and use forwardRef, my tests is broken.

Component that uses forwardRef now exports as:

export default forwardRef((props, ref) => (
  <Input {...props} forwardedRef={ref} />
));

and test is:

test('with `id` prop', () => {
    const output = shallow(<Input id={id} />);

    expect(renderToJson(output)).toMatchSnapshot();
  });

throw error is: Invariant Violation: ReactShallowRenderer render(): Shallow rendering works only with custom components, but the provided element type was 'object'.

But if I use render method this error doesn't happened.

When I use mount method with test is:

test('value state is changed', () => {
    const value = 'New value';
    const wrapper = shallow(<Input />);

    wrapper.setProps({ value });
    expect(wrapper.state().value).toEqual(value);
  });

I catch error is: Enzyme Internal Error: unknown node with tag 14

Expected behavior

Your environment

API

• shallow
• mount
• render

Version

library	version
Enzyme	3.3.0
React	16.3.0

Adapter

• enzyme-adapter-react-16
• enzyme-adapter-react-15
• enzyme-adapter-react-15.4
• enzyme-adapter-react-14
• enzyme-adapter-react-13
• enzyme-adapter-react-helper
• others ( )

[koba04]

This might be solved by #1592

[petegleeson]

@koba04 I was having the same problem, it is fixed by #1592

[Hypnosphi]

My workaround is this:

// WrappedInput.js
export const WrappedInput = (props, ref) => <Input {...props} forwardedRef={ref} />

export default React.forwardRef(WrappedInput)

// WrappedInput.test.js
import {WrappedInput} from './WrappedInput'

test('with `id` prop', () => {
  const output = shallow(WrappedInput({id}));

  expect(renderToJson(output)).toMatchSnapshot();
});

[joepuzzo]

You could add a patch as specified in this issue #1513

[KevinGrandon]

Best way to fix this currently: yarn add --dev enzyme-adapter-react-16@npm:enzyme-react-adapter-future.

More details here.

[FezVrasta]

@KevinGrandon I'm trying your package but I still get the same error, are you sure it ships the patch needed for the forwardRef feature?

I don't see the node listed in the allowed nodes list:
https://github.com/KevinGrandon/enzyme/blob/master/packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js#L25-L34

[Hypnosphi]

@KevinGrandon Looks like your package doesn't include a fix for ForwardRef

[ljharb]

There's no need for a separate package; everything in this repo is now published.

#1592 will fix it once merged and released.

[DMShamonov]

@ljharb With mount method I still catching this error ( Enzyme Internal Error: unknown node with tag 14)

[ljharb]

It’s not released yet, i just merged it an hour ago.

[DMShamonov]

@ljharb Ok. Thanks )

[sevketufuk]

@ljharb so 3.4.2 should solve this problem? I'm using 3.4.2 and I still got the same error.

[ljharb]

No, it should not. This is a new feature, so it would be included in v3.5.0.

[leobetosouza]

@ljharb any prevision to v3.50 release?

[ljharb]

Like every release, after it’s ready, and when time permits.

It hasn’t even been a full day yet. I do sleep, in case that isn’t apparent.

[leobetosouza]

@ljharb i'm not blaming you... you dont need to be defensive. it is just a question :(

i dont know the codebase, but is there anything I can do to help?

[RahulDole]

Looks like the new version v3.5.0 is released! And that suddenly made my life easier! Last Friday night I had checked it and it wasn't released, and today Monday morning surprise that its released. Thanks a lot @ljharb