使用 Jest 测试 React 的组件时如何 mock Redux 中的 action

如果你是一名前端开发人员，那么你肯定知道 React 和 Redux 的重要性。React 作为一个 UI 组件库，很好地解决了界面展示的问题，而 Redux 则处理了状态管理的问题。在开发过程中，我们通常使用 Jest 进行单元测试，以确保我们的代码正常工作。但是，当你在测试一个 React 组件时，有时候需要 Mock 掉 Redux 中的 action，那么您应该如何处理呢？

为什么需要 Mock Redux Action？

为了更好地理解为什么需要 Mock Redux Action，我们需要首先知道 Redux 是如何工作的。Redux 中包含了 State 和 Action 两个重要的概念。State 表示应用当前的状态，而 Action 则描述了如何更新这个状态，即表明我们想做的事情。因此，在测试组件时，我们需要测试该组件在处理 Redux Action 时是否正确。但是，我们在测试时并不想要真实的 Action，因为这可能涉及到网络请求等操作，会导致测试变得缓慢且复杂。因此，我们需要 Mock 掉 Action，以确保我们的测试变得快速和简单。

如何 Mock Redux Action？

现在，我们已经知道了为什么需要 Mock Redux Action，接下来，我们可以开始学习如何实现了。我们可以通过下面的步骤来进行 Mock Action：

1. 首先在 __mocks__ 目录下创建一个与 Action 名称相同的文件，并在其中实现 Mock Action。

2. 然后在测试文件中手动设置 Action 的实现函数。

下面是一个具体的示例，展示如何 Mock 某些 Redux Action。

// javascriptcn.com 代码示例
// 1. 创建 Mock Action 文件
// __mocks__/authActions.js

export const login = jest.fn(() => ({
  type: 'user/login',
  payload: {
    token: 'mocked_token',
  },
}));

// javascriptcn.com 代码示例
// 2. 在测试文件中手动设置 Action 的实现函数
// Login.test.js

import React from 'react';
import { shallow } from 'enzyme';
import Login from '../Login';
import { login } from '../../redux/actions/authActions';

jest.mock('../../redux/actions/authActions');

describe('<Login />', () => {
  beforeEach(() => {
    login.mockClear();
  });

  it('should be able to login successfully', async () => {
    const wrapper = shallow(<Login />);
    const emailInput = wrapper.find('input[name="email"]');
    emailInput.simulate('change', { target: { value: 'david@example.com' } });

    const passwordInput = wrapper.find('input[name="password"]');
    passwordInput.simulate('change', { target: { value: 'password1' } });

    const form = wrapper.find('form');
    form.simulate('submit', { preventDefault: jest.fn() });
    await Promise.resolve();

    expect(login).toHaveBeenCalledWith({
      email: 'david@example.com',
      password: 'password1',
    });
  });
});

在上面的示例中，我们 Mock 了 login 函数，并在测试文件中手动设置了其实现函数。然后，我们测试用户能否成功登录并检查该函数是否已正确地被调用。

总结

从上面的文章，我们可以了解如何使用 Jest 测试 React 组件时 Mock Redux Action，以更好地确保组件的正确性。我们需要手动在测试文件中设置 Action 的实现函数，并且应该将其放在 __mocks__ 目录中以优化测试性能。当我们能够正确地处理 Redux Action 时，我们就可以快速反馈问题并找到问题所在。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6501653895b1f8cacdf1f119