React应用测试报Actions must be plain objects错误如何解决

问题原因 #

你用jest.mock全局mock了PostsAction模块后，模块导出的getPostsAction被替换成了无返回值的Jest模拟函数，组件里调用getPostsAction()返回undefined，dispatch接收不到合法的action对象，就抛出了这个错误。

修复方案 #

你可以根据测试需求选择以下任意一种方案：

方案1：保留现有测试逻辑（仅验证action是否被调用）

给模拟的getPostsAction设置一个合法的纯对象返回值即可，修改你的Post.test.js代码：

import React from 'react';
import { mount } from 'enzyme';
import Post from './Post';
import { storeFactory } from 'testUtils';
import { Provider } from 'react-redux';

jest.mock("store/actions/PostsAction")
import {getPostsAction as mockGetPostsAction} from 'store/actions/PostsAction'

// 新增这一行，给模拟函数设置合法的action返回值
mockGetPostsAction.mockReturnValue({ type: 'MOCK_GET_POSTS' })

const setup = (initialState = {})=>{
    const store = storeFactory(initialState);
    const wrapper = mount(<Provider store={store}><Post /></Provider>)
    return wrapper; 
}

test('getPostsAction on Post mount', ()=>{
        const wrapper = setup()             
        expect(mockGetPostsAction).toHaveBeenCalledTimes(1) 
})

该方案完全匹配你当前测试用例的验证目标，修改成本最低。

方案2：测试完整异步逻辑

如果你需要验证请求发送、数据更新的全流程，就不要mock整个PostsAction模块，改成mock你的请求工具$http即可：

// 删除jest.mock("store/actions/PostsAction")这一行
// 新增模拟请求工具
jest.mock('你的$http依赖路径', () => ({
  get: jest.fn(() => Promise.resolve({ data: { data: [] } }))
}))

该方案会实际走thunk中间件的异步逻辑，更适合集成测试场景。

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