Write cypress tests
Frontend Cypress

Elevate Your React.js Testing: A Complete Guide to Cypress Testing with Redux and React Router

Boris Civcic

Introduction:

Testing React.js applications with complex features like Redux state management and React Router navigation can be challenging. In this tutorial, we’ll explore how to leverage Cypress to test such applications effectively. We’ll create a sample React component, App, that incorporates Redux for state management and React Router for navigation. Then, we’ll write Cypress tests to ensure that the component renders correctly and that routing between different pages works as expected.

Prerequisites:

Ensure you have Node.js and npm installed, along with basic knowledge of React.js, Redux, and React Router.

Step 1: Setting up the Project:

Start by initializing a new React.js project and installing the necessary dependencies:

npx create-react-app my-app --template typescript
cd my-app
npm install --save-dev cypress @cypress/webpack-preprocessor typescript @types/react @types/react-dom
npm install react-router-dom redux react-redux

Step 2: Creating the App Component:

Create a simple React component called App that includes Redux state management and React Router navigation:

// App.tsx
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';

// Redux setup
const initialState = { count: 0 };

function reducer(state = initialState, action: { type: string }) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

const store = createStore(reducer);

// Components
const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;

const App: React.FC = () => {
  return (
    <Provider store={store}>
      <Router>
        <div>
          <nav>
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/about">About</Link>
              </li>
            </ul>
          </nav>

          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
        </div>
      </Router>
    </Provider>
  );
};

export default App;

Step 3: Writing Cypress Tests:

Now, let’s write Cypress tests to ensure that the App component renders correctly and that navigation between routes works as expected:

// cypress/integration/app.spec.ts
describe('App component tests', () => {
  beforeEach(() => {
    cy.visit('/');
  });

  it('renders home page by default', () => {
    cy.get('h2').should('have.text', 'Home');
  });

  it('navigates to About page when About link is clicked', () => {
    cy.get('nav').contains('About').click();
    cy.get('h2').should('have.text', 'About');
  });
});

Step 4: Running Cypress Tests:

Execute Cypress tests to ensure they pass as expected:

npx cypress run

or open Cypress Test Runner:

npx cypress open

Conclusion:

By integrating Cypress with Redux and React Router, you can ensure robust testing of your React.js applications. This tutorial has equipped you with the knowledge and tools needed to effectively test complex features like state management and navigation. Incorporate these strategies into your testing workflow to enhance the reliability and quality of your applications.

Happy testing!