项目大量使用Redux-form，用Jest+Enzyme测试失败求助

我之前也踩过Redux-form结合Jest/Enzyme测试的坑，针对你的登录表单组件，给你整理几个实用的测试思路和代码示例：

核心前提：导出未包装的组件 #

首先，确保你的LoginForm类是单独导出的（就像你代码里的export class LoginForm），而不是只导出被reduxForm高阶组件包装后的默认导出。这样测试时我们可以直接测试原始组件，不用额外处理Redux-form的高阶逻辑。

测试用例示例 #

1. 测试表单提交时正确调用login action #

这个用例验证用户提交表单时，组件是否正确触发login action并传递正确参数：

import { shallow } from 'enzyme';
import { LoginForm } from './LoginForm'; // 导入未包装的类组件
import { login } from './actions';

// 模拟action和props
jest.mock('./actions', () => ({
  login: jest.fn()
}));

describe('LoginForm', () => {
  let wrapper;
  const mockHandleSubmit = jest.fn(callback => callback); // 模拟handleSubmit，直接回传回调函数
  const mockRedirectUrl = '/dashboard';

  beforeEach(() => {
    wrapper = shallow(
      <LoginForm
        handleSubmit={mockHandleSubmit}
        login={login}
        redirectUrl={mockRedirectUrl}
        invalid={false}
      />
    );
  });

  it('should call login action with correct values when form is submitted', () => {
    const mockFormValues = { email: 'test@example.com', password: '123456' };
    
    // 触发表单提交
    wrapper.find('form').simulate('submit', mockFormValues);

    // 断言login被调用，参数正确
    expect(login).toHaveBeenCalledWith(mockFormValues, mockRedirectUrl);
  });
});

2. 测试表单验证失效时提交按钮禁用 #

如果你的表单里有提交按钮，且根据invalid prop控制禁用状态，可以这样测试：

it('should disable submit button when form is invalid', () => {
  // 传入invalid: true的props重新渲染
  wrapper.setProps({ invalid: true });
  
  // 假设你的提交按钮类型是submit，找到它
  const submitButton = wrapper.find('button[type="submit"]');
  
  expect(submitButton.prop('disabled')).toBe(true);
});

3. 测试状态信息渲染 #

如果组件根据status prop显示登录状态（比如错误提示），可以验证这部分渲染逻辑：

it('should display status message when provided', () => {
  const mockStatus = '邮箱或密码错误';
  wrapper.setProps({ status: mockStatus });
  
  // 假设你用特定类名的元素显示status
  const statusElement = wrapper.find('.status-message');
  
  expect(statusElement.text()).toBe(mockStatus);
});

关键注意点 #

• 模拟handleSubmit：Redux-form的handleSubmit会处理表单验证和值收集，测试时我们可以简化它，直接让它回传回调函数，这样就能直接触发我们的onSubmit逻辑。
• 避免测试Redux-form本身：Redux-form的内部逻辑（比如表单验证、值处理）已经由官方测试过，我们只需要测试自己组件的业务逻辑即可。
• 使用shallow渲染优先：大部分场景下用shallow就足够测试组件的核心逻辑，除非你需要测试子组件的交互，再考虑用mount。

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