Incorrect node name for nested components
paulclijsters opened this issue · comments
paulclijsters commented
The node names changed after upgrading from react 16 with official enzyme-adapter-react-16.
Dependencies:
"react": "^17.0.1",
"@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
"enzyme": "^3.11.0",
"enzyme-to-json": "^3.6.1",
The following test can reproduce the problem (using jest):
test.only('Nested component snapshot', () => {
// Arrange
const DummyComponent = (_, ref) => <div ref={ref} />;
const MemoForwardComponent = React.memo(React.forwardRef<HTMLDivElement>(DummyComponent));
const Component: React.FC = () => <MemoForwardComponent />;
// Act
const wrapper = shallow(<Component />);
// Assert
expect(wrapper).toMatchInlineSnapshot(`<Memo(ForwardRef(DummyComponent)) />`);
});
This React 16 is succeeding, but with React 17 with @wojtekmaj/enzyme-adapter-react-17 v0.4.1 is failing with the following message:
● Nested component snapshot
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Nested component snapshot 1`
- Snapshot - 1
+ Received + 1
- <Memo(ForwardRef(DummyComponent)) />
+ <Memo([object Object]) />
19 |
20 | // Assert
> 21 | expect(wrapper).toMatchInlineSnapshot(`<Memo(ForwardRef(DummyComponent)) />`);
| ^
22 | });
23 |
24 |
Seems the
This is related to the following issue in the official enzyme react 16 adapter: enzymejs/enzyme#2481
Wojciech Maj commented
Gotta love "self-fixing" bugs :D I appreciate your input mate!
Released in v0.5.0.