1

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?

Improve this question
10
  • 1
    From what I've understood of the RTL docs, RTL is a lot of syntactic sugar around/over react-test-renderer, that being said, in my 3+ years in react I've not ever used react-test-renderer (save for maybe some custom react hooks unit testing). Previously I used jestjs/enzyme before jumping ship over to jestjs/RTL. Never looked back. Commented Oct 6, 2020 at 7:59
  • 1
    "why i need to use react-test-renderer along with testing-library" who says you need? Can you provide an example of using test renderer with the testing-library? Commented Oct 6, 2020 at 7:59
  • 1
    MB those tutorials are showing the difference between them: here you have lightweight "unittest-like" render to object, here you have full render to DOM. Commented Oct 6, 2020 at 8:02
  • 1
    @DrewReese i think RTL is away more than just a syntactic sugar for RTR, both work differently, RTR doesn't depend on DOM, RTL depend of DOM node queries, as i understood Commented Oct 6, 2020 at 8:03
  • 1
    @CodeEagle Hmm, I think you're correct... RTL says it builds on top of DOM Testing Library. I think I may've conflated the two based on RTL's API, namely the act method. Commented Oct 6, 2020 at 8:10

1 Answer 1

Reset to default
0

Renderer

react-test-renderer is the most basic utility library that is shipped with React. From React documentation:

This package provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment.

@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

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.