0

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
  • 43,833
  • 5
  • 21
  • 43
Code Eagle
  • 740
  • 3
  • 15
  • 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) – slideshowp2 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

0 Answers0