Today I was writing a unit test for a React component. The first test I begin with is the "match snapshot test".
Copied right away from the docs:
import renderer from 'react-test-renderer';
import { MyComponent } from './my-component';
test('render: match snapshot', () => {
const render = renderer.create(<MyComponent />).toJSON();
expect(render).toMatchSnapshot();
})
This will create a .snap (text) file:
src
├── components
│ ├── __snapshots__ # <== creates this directory
│ │ ├── my-component.test.tsx.snap # <== snapshot
│ ├── my-component
│ │ ├── my-component.scss
│ │ ├── my-component.tsx
│ │ ├── my-component.test.tsx
│ ...
Using react-test-renderer library:
So far so good. This is what it's documented.
Today I asked GitHub Copilot 🤖 to fill my test file. It suggested me something different instead:
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
import { MyComponent } from './my-component';
test('render: match snapshot', () => {
- const render = renderer.create(<MyComponent />).toJSON();
- expect(render).toMatchSnapshot();
+ const { asFragment } = render(<MyComponent />);
+ expect(asFragment()).toMatchSnapshot();
})
Which doesn't need the extra dependency react-test-renderer.
I was like "wait, does this work?"
It does.
It creates the exact file structure. So I came to the docs checking for the differences between asFragment() and renderer.create().toJSON(). But I haven't found good documentation on this regard.
Copilot's code works. Saves me one dependency. Proposed me a solution that isn't - well - documented and, in the end, has surpassed me.
This is interesting at the very least.
--
Thanks for reading 💚.
Top comments (0)