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?

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
Code Eagle
  • 1,293
  • 1
  • 17
  • 34
  • 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. – Drew Reese Oct 06 '20 at 07: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? – Yury Tarabanko Oct 06 '20 at 07:59
  • @YuryTarabanko some tutorials on youtube used both, i used them blindly following the tutorials but after reading about all testing libraries i figured out that it was crazy to use them together – Code Eagle Oct 06 '20 at 08:01
  • 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. – Yury Tarabanko Oct 06 '20 at 08: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 – Code Eagle Oct 06 '20 at 08: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](https://testing-library.com/docs/react-testing-library/api), namely the `act` method. – Drew Reese Oct 06 '20 at 08:10
  • @DrewReese No problem, plenty of libraries there, too confusing :) – Code Eagle Oct 06 '20 at 08:20
  • @YuryTarabanko You asked for an example, this is one of them, you can start watching after 16:00 – Code Eagle Oct 06 '20 at 08:23
  • 1
    Does this answer your question? [Difference between enzyme, ReactTestUtils and react-testing-library](https://stackoverflow.com/questions/54152562/difference-between-enzyme-reacttestutils-and-react-testing-library) – Lin Du Oct 27 '20 at 07:09
  • @slideshowp2 i really understand the difference between all of them, but i have watched many tutorials that use testing library with react-test-renderer which confused me about the use of all of them, Thank you – Code Eagle Oct 27 '20 at 15:43

1 Answers1

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

ARiyou Jahan
  • 622
  • 6
  • 7