React Typescriptでcontainer単体テストでつまったはなし

概要

React Typescript, jestで単体テストの簡単な作り方。

Tl;DR

redux-mock-storeでmock-storeを作成。
jest.requireaActualでProvider呼び出し、useDispacthとuseSelectorをmock化する。

• レポ

想定ファイル

todo.tsx

import { createDraftSafeSelector } from '@reduxjs/toolkit';
import React from 'react';
import { selectAllTodo } from '../store/todo/selector';
import { useselector } from "react-redux"

const containerSelector = createDraftSafeSelector(
  selectAllTodo,
  todos => ({
    todos
  })
)

/* eslint-disable-next-line */
export interface TodoListContainerProps {}

export function TodoListContainer(props: TodoListContainerProps) {
  const { todos } = useselector(containerSelector)
  return (
    <div>
      {todos.map(t => (<div key={t.title}>{t.title}</div>))}
    </div>
  );
}

export default TodoListContainer;

テストファイル

todo.spec.tsx

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

import TodoListContainer from './todo-list-container';

describe('TodoListContainer', () => {
  it('should render successfully', () => {
    const { baseElement } = render(<TodoListContainer />);
    expect(baseElement).toBeTruthy();
  });
});

解決策として、redux-mock-storeとjestでモック化する

todo.spec.tsx

import React from 'react';
import { cleanup, render } from '@testing-library/react';
import configureStore from "redux-mock-store" // reudux mock storeでデータを読み込む
import TodoListContainer from './todo-list-container';

const mockStore = configureStore() // mockStore Functionを作成

// jest.mock('react-redux') で'react-redux'全体がMock化されるため、ProviderをActualで呼び出す。
const { Provider } = jest.requireActual("react-redux")

// mock化されたdispatcherとselectorを作成
// selectorの実装を変えたときについては、jestのmock functionを書き換える。
jest.mock("react-redux", () => ({
  useselector: jest.fn().mockReturnValue({
    todos: []
  }),
  useDispatch: jest.fn().mockReturnValue(jest.fn())
}))

describe('TodoListContainer', () => {
  afterEach(() => {
    cleanup()
  })
  it('should render successfully', () => {
    const { baseElement } = render(
      <Provider store={mockStore()}>
        <TodoListContainer  />
      </Provider>
    );
    expect(baseElement).toBeTruthy();
  });
});

以上で、React Typescriptでcontainer単体テストをとりあえず実装できます。
Unit/Integrationを利用する場合は比較的つかえるかなとおもいますが、作り込む場合はjestの学習コストがあがるのできっと、人柱が必要になります。