Menu
So, react-testing-library is used for unit/integration testing, and cypress is used for e2e testing. However, both appear to do the same thing:
react-testing-library
cypress
Aside from the feedback cycle, they appear to be almost identical. Can somebody clarify what the differences are? Why would you want to use both?
983
Cypress uses a browser. Jest uses fake DOM and isn't eligible for frontend e2e or intergration tests that need full DOM support, unless used with Puppeteer or else. Once you have a good idea what kind of test you're writing, the choice is quite straightforward.
Cypress has many benefits over other end-to-end test runners: The best experience of writing and debugging tests. Ability to inspect the page at any moment during the test run using the browser developer tools. All commands wait for the DOM to change when necessary, which simplifies testing async behavior.
Jest is a JavaScript test runner that lets you access the DOM via jsdom . While jsdom is only an approximation of how the browser works, it is often good enough for testing React components.
The Cypress Component Test Runner is an alternative to a jsdom based testing environment, such as Jest and Vue Test Utils. Cypress component testing offers many benefits: Runs in a real browser. This means your tests are closer to what your users will be experiencing.
You've answered your question in the first line. If you want to test your React app end-to-end, connected to APIs and deployed somewhere, you'd use Cypress.
react-testing-library's aimed at a lower level of your app, making sure your components work as expected. With Cypress, your app might be deployed on an environment behind CDNs, using caching, and its data could come from an API. In Cypress you'd also write an end-to-end journey, a happy path through your app that might give you extra confidence once you've deployed.
148
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
