Redux cupress
Frontend Backend

Cypress Integration with Redux and TypeScript

Boris Civcic

To write tests for Redux with Cypress, we need to create a React component that dispatches Redux actions and displays the Redux state. Let’s modify the App component to dispatch the increment action when a button is clicked and display the current count from the Redux state.

Here’s how you can modify App.tsx to incorporate Redux and dispatch actions:

// App.tsx
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { increment } from './actions';
import { RootState } from './reducers';

const App: React.FC = () => {
  const dispatch = useDispatch();
  const count = useSelector((state: RootState) => state.count);

  const handleIncrement = () => {
    dispatch(increment());
  };

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
};

export default App;

Ensure you have the corresponding Redux actions and reducers defined in actions.ts and reducers.ts.

Now, let’s write Cypress tests to ensure that the App component behaves as expected when interacting with Redux:

// cypress/integration/app.spec.ts
import { increment } from '../../src/actions';
import { RootState } from '../../src/reducers';

describe('App component with Redux tests', () => {
  beforeEach(() => {
    cy.visit('/');
  });

  it('displays count from Redux state', () => {
    cy.get('h2').should('have.text', 'Count: 0');
  });

  it('increments count in Redux state when button is clicked', () => {
    cy.window().its('__store__').invoke('dispatch', increment());
    cy.get('h2').should('have.text', 'Count: 1');
  });
});

Make sure to replace '../../src/actions' and '../../src/reducers' with the correct paths to your Redux action creators and reducers.

Run Cypress tests to ensure they pass as expected:

npx cypress run

or open Cypress Test Runner:

npx cypress open

These tests ensure that the App component correctly interacts with Redux by displaying the count from the Redux state and incrementing the count when the button is clicked, validating the integration of Redux with your React.js application.