React snapshot testing - react-test-renderer vs. react-testing-library

Question

I am trying to do snapshot testing in my React app. I am already using react-testing-library for unit testing in general. However for snapshot testing I have seen different ways of doing it on the net, either using react-test-renderer or react-testing library. Here are 3 examples, what is the difference between them and what is preferred?

1. Using react-test-renderer

test('renders correctly', () => {
  const tree = renderer
    .create(<Link page="http://www.facebook.com">Facebook</Link>)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

2. Using react-testing-library and asFragment()

test('renders correctly', () => {
  const { asFragment } = render(<NotFound />);
  expect(asFragment()).toMatchSnapshot();
});

3. Using react-testing-library and container

test('renders the component', () => {
  const container = render(<Component />)
  expect(container.firstChild).toMatchSnapshot()
})

Naresh · Accepted Answer · 2021-02-27 21:42:16Z

13

After much experimentation, I settled on option 2 (react-testing-library with asFragment()) because it produces cleaner snapshots. Option 1 (react-test-renderer) generates output that contains component properties and other details that are not relevant.

answered Feb 27, 2021 at 21:42

Naresh

25.9k35 gold badges147 silver badges216 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Manu Artero Over a year ago

thanks @Naresh. I came with the exact same question; (somehow) related post: dev.to/manuartero/…

Collectives™ on Stack Overflow

React snapshot testing - react-test-renderer vs. react-testing-library

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related