如何在React BooksContainer单元测试中用Jest模拟GetBooksAction

1. 修复Mock类型错误 #

你碰到的TypeError: _BookAction.default.mockImplementation is not a function是ES模块模拟方式不正确导致的。如果GetBooksAction是默认导出的异步thunk（比如用Redux Toolkit的createAsyncThunk创建），按以下方式正确模拟：

// 测试文件顶部声明mock
jest.mock('../actions/BookAction', () => ({
  __esModule: true,
  default: jest.fn()
}));

// 测试用例中设置mock返回逻辑
import GetBooksAction from '../actions/BookAction';

GetBooksAction.mockImplementation(() => async (dispatch) => {
  dispatch({
    type: 'books/getBooks/fulfilled',
    payload: [
      { id: 1, title: '测试书籍1' },
      { id: 2, title: '测试书籍2' }
    ]
  });
});

若GetBooksAction是具名导出，调整mock结构为对应具名字段即可。

2. 确保BookList获取预期数据 #

核心问题是测试未等待异步action完成，或store初始状态未正确处理。结合Redux Toolkit特性，推荐用真实store实例配合异步等待：

import { render, screen, waitFor } from '@testing-library/react';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
import booksReducer from '../reducers/booksReducer';
import BooksContainer from '../components/BooksContainer';
import GetBooksAction from '../actions/BookAction';

// 模拟异步thunk的成功返回
GetBooksAction.mockResolvedValue({
  payload: [
    { id: 1, title: '测试书籍1' },
    { id: 2, title: '测试书籍2' }
  ]
});

test('BookList渲染预期书籍列表', async () => {
  const store = configureStore({
    reducer: {
      books: booksReducer
    }
  });

  // 若组件挂载时自动dispatch action，可跳过手动dispatch，直接渲染
  await store.dispatch(GetBooksAction());

  render(
    <Provider store={store}>
      <BooksContainer />
    </Provider>
  );

  // 等待异步数据更新后断言
  await waitFor(() => {
    expect(screen.getByText('测试书籍1')).toBeInTheDocument();
    expect(screen.getByText('测试书籍2')).toBeInTheDocument();
  });
});

同时检查BooksContainer是否在挂载时触发了GetBooksAction，若是则无需手动dispatch，只需确保mock能正确触发fulfilled状态更新store。

3. 处理组件两次渲染问题 #

这是React 18 StrictMode的默认行为——在开发/测试环境中，StrictMode会让组件挂载两次以检测副作用。有两种解决方式：

• 关闭测试中的StrictMode：渲染组件时去掉StrictMode包裹（若测试入口未强制添加）
• 忽略首次空渲染：使用异步查询方法（如findBy*），它会自动等待数据加载完成后的第二次渲染结果：

test('BookList渲染预期书籍列表', async () => {
  const store = configureStore({
    reducer: {
      books: booksReducer
    }
  });

  render(
    <Provider store={store}>
      <BooksContainer />
    </Provider>
  );

  // findByText自动等待元素出现，跳过首次空渲染
  const book1 = await screen.findByText('测试书籍1');
  expect(book1).toBeInTheDocument();
});

内容的提问来源于stack exchange，提问作者10101101