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.