https://github.com/abhinaba-ghosh/react-integration-tests-example

Integration tests for react and redux using react-testing-library and Cypress
https://github.com/abhinaba-ghosh/react-integration-tests-example

cypress cypress-io integration-testing react react-testing-library

Last synced: about 2 months ago
JSON representation

Integration tests for react and redux using react-testing-library and Cypress

• Host: GitHub
• URL: https://github.com/abhinaba-ghosh/react-integration-tests-example
• Owner: abhinaba-ghosh
• Created: 2021-06-05T16:34:06.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-06-08T08:29:51.000Z (over 3 years ago)
• Last Synced: 2024-10-18T08:34:29.966Z (3 months ago)
• Topics: cypress, cypress-io, integration-testing, react, react-testing-library
• Language: JavaScript
• Homepage:
• Size: 660 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Integration Test Example

A comparison between [Cypress](https://www.cypress.io/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) for implementing integration tests for React.

## Integration tests

The integration tests has been added for the complete workflow of the TODO app where composite components interacts with each other.

![integration-flow](./flow.png)

Same integration test is implemented using both - Cypress has React-Testing-Library. While both the libraries are effective, i feel cypress has a little edge over RTL because of below aspects -

-   Cypress executes the test in real browser context making the visualization experience better.

-   Cypress provides fluent chained queries.

-   Cypress retries each assertions out of the box that reduces the chance of flaky tests.

-   [Cypress-React-Selector](https://github.com/abhinaba-ghosh/cypress-react-selector) plugin makes the job easy to fetch elements using native react properties - component, props and states.

-   Cypress provides real-time react dev-tools support to observe react properties.

## Commands

-   The RTL integration tests can be found [here](./src/test/rtl)

-   The Cypress integration test can be found [here](./src/test/cypress)

```ssh

// run RTL test

npm run test-rtl

// run cypress test

npm run test-cy

```