react-redux mock example

react-redux 모듈을 모킹하기 위해 '/__mocks__' 디렉토리를 생성하고 'react-redux.js'를 생성한다.

// path: /__mocks__/react-redux.js

export const useDispatch = jest.fn();

export const useSelector = jest.fn((selector) => selector({}));

 

테스트의 대상이 되는 컴포넌트는 아래와 같다.

import { useDispatch, useSelector } from 'react-redux';

import { updateCheckedItem } from '../actions';

export default function App() {
  const dispatch = useDispatch();

  const { categories } = useSelector((state) => ({
    categories: state.categories,
  }));

  function handleClick(name, value) {
    dispatch(updateCheckedItem(name, value));
  }

  return (
    <Categories
      categories={categories}
      onClick={handleClick}
    />
  );
}

 

테스트는 'jest.mock('./moduleName')'을 통해 모듈을 모킹하고 usedispath와 useSelector를 아래와 같이 구현하도록 한다.

import { render, fireEvent } from '@testing-library/react';

import { useDispatch, useSelector } from 'react-redux';

import App from './App';

jest.mock('react-redux');

describe('App', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  const dispatch = jest.fn();

  useDispatch.mockImplementation(() => dispatch);

  useSelector.mockImplementation((selector) => selector({
    categories: [
      { id: 1, name: '기업1' },
      { id: 2, name: '기업2' },
      { id: 3, name: '기업3' },
    ],
  }));

  it('카테고리 목록을 보여준다', () => {
    const { getByText } = render((
      <App />
    ));

    expect(getByText('기업1')).toBeInTheDocument();
    expect(getByText('기업2')).toBeInTheDocument();
    expect(getByText('기업3')).toBeInTheDocument();
  });

  it('목록이 클릭되면 체크된 목록으로 변경한다', () => {
    const { getByText } = render((
      <App />
    ));

    fireEvent.click(getByText('기업1'));

    expect(dispatch).toBeCalledWith({
      type: 'updateCheckedItem',
      payload: {
        checkedCategory: {
          id: 1,
          text: '기업1',
        },
      },
    });
  });
});