I can't understand why some tutorials use react-test-renderer
with react-testing-library
,
As i understand, react-test-renderer
is a library that can create a pure object from a react component and convert it to json snapshot!
import TestRenderer from 'react-test-renderer';
function Link(props) {
return <a href={props.page}>{props.children}</a>;
}
const testRenderer = TestRenderer.create(
<Link page="https://www.facebook.com/">Facebook</Link>
);
expect(testRenderer).toMatchSnapshot();
Now, i can do the same with Testing library
:
import { render } from '@testing-library/react;
test('create link snapshot', () => {
const {container} =
render(<Linkpage="https://www.facebook.com/">Facebook</Link>);
expect(container.firstChild).toMatchSnapshot();
})
I really can't understand why i need to use react-test-renderer
along with testing-library
, what can react-test-renderer
do testing-library
can't?
Renderer
react-test-renderer is the most basic utility library that is shipped with React. From React documentation:
@testing-library/react
React Testing Library is part of the testing-library family, is built on top of react-test-renderer and is made to be a rather lightweight solution.
It provides utilities to test React and follow the idea of avoiding implementations details tests.
Enzyme
The Enzyme is much more complex and heavy. It gives you many more functionalities but not only for the best: it becomes too easy to do implementation details testing.
*Note that: Testing implementation details is fundamentally bad *Note that: Enzyme is dead. (There will be no React 18 support). Read more Here
Read More:
You can visit the link below to read more about these tools and their pros and cons. you can also see a complete comparison and experience after using them over years.
https://morintd.medium.com/react-testing-understand-and-chose-the-right-tools-858236d3c4e1