How do I test a React component with Redux using Testing Library?

How do I test a React component with Redux using Testing Library?

To test a React component with Redux using Testing Library, you can follow these steps: 1. Set up your testing environment with Jest and React Testing Library. 2. Create a mock store using redux-mock-store. 3. Render your component wrapped in a <Provider> with the mock store. 4. Use Testing Library's queries to interact with and assert on your component.

Can you show me a code example?

Sure! Here's a simple example:

import React from 'react';
import { render, screen } from '@testing-library/react';
import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store';
import MyComponent from './MyComponent';

const mockStore = configureStore();

test('renders MyComponent with Redux', () => {
  const store = mockStore({ myState: { value: 'Hello' } });
  render(
    <Provider store={store}>
      <MyComponent />
    </Provider>
  );
  expect(screen.getByText(/Hello/i)).toBeInTheDocument();
});

This code sets up a mock Redux store and tests if the component renders the expected text.

What if I need to test actions or reducers?

For testing actions, you can directly call the action creators and assert the returned action objects. For reducers, you can pass the current state and an action to the reducer function and check if the new state is as expected. Would you like examples for those?

Yes, please provide examples for actions and reducers.

Absolutely! Here's how you can test an action and a reducer:

Testing an Action:

import { myAction } from './actions';

test('myAction returns the correct action object', () => {
  const expectedAction = { type: 'MY_ACTION', payload: 'data' };
  expect(myAction('data')).toEqual(expectedAction);
});

Testing a Reducer:

import reducer from './reducer';

test('reducer returns the initial state', () => {
  expect(reducer(undefined, {})).toEqual({ value: 0 });
});

test('reducer handles MY_ACTION', () => {
  expect(reducer({ value: 0 }, { type: 'MY_ACTION', payload: 1 })).toEqual({ value: 1 });
});

Thanks! This was really helpful.