测试 React 组件时使用 Enzyme 遇到的 10 个坑及解决方案-JavaScript中文网-JavaScript教程资源分享门户

React 组件测试是前端开发中非常重要的一部分，在测试 React 组件时，我们通常会用到 Enzyme 这个测试库。但是，在使用 Enzyme 进行组件测试时，常常会遇到各种各样的问题，下面总结了 10 个常见的坑及其解决方案。

坑 1：无法渲染组件

当我们在测试组件时，最常见的问题就是无法渲染组件，这可能是因为我们在测试中没有正确地设置 React 的渲染环境，导致组件无法正常渲染。

解决方案：在测试文件中，我们需要使用 Enzyme 的 mount 方法渲染组件，并使用 ReactDom 的 createPortal 方法来创建渲染环境。

-- -------------------- ---- -------
------ ----- ---- -------- 
------ - ----- - ---- ---------
------ - -- -------- ---- ------------

----- ------------ - ----------------------
--------------------- - ------ -- -----

--------------------- -- -- -
  ----------- ----------- -- -- -
    ----- ------- - ---------------- ----
    ----------------------------------
  ---
---

--------------------- - -------------

坑 2：无法触发事件

在测试组件时，我们经常需要测试组件的点击事件、交互事件等，但是有时候我们会发现，使用 Enzyme 的 simulate 方法无法触发事件。

解决方案：这个问题通常是因为我们的事件没有正确地绑定到组件上，或者事件绑定到了父组件上，我们需要使用 find 方法找到正确的子组件并触发事件。

it('invokes onClick callback', () => {
  const onButtonClick = jest.fn();
  const wrapper = shallow(<Button onClick={onButtonClick} />);
  wrapper.find('.button').simulate('click');
  expect(onButtonClick).toHaveBeenCalled();
});

坑 3：无法测试组件的生命周期方法

组件的生命周期方法是 React 组件的重要部分，但是在使用 Enzyme 模拟测试时，我们会发现组件的生命周期方法并没有被正确调用。

解决方案：在测试组件的生命周期方法时，我们需要使用 mount 方法而不是 shallow 方法，并手动调用组件的生命周期方法。

it('calls componentDidMount', () => {
  jest.spyOn(Component.prototype, 'componentDidMount');
  const wrapper = mount(<Component />);
  expect(Component.prototype.componentDidMount).toHaveBeenCalled();
  Component.prototype.componentDidMount.mockRestore();
});

坑 4：无法测试 Redux 的 Provider

当我们使用 Redux 配合 React 组件进行开发时，通常会使用 Redux 的 Provider 组件来将 store 注入到组件中。但是，在测试时我们会发现无法正确测试 Provider 组件。

解决方案：在测试 Provider 组件时，我们需要手动创建 store，并将 store 作为 props 传递给 Provider 组件。

const mockStore = configureMockStore([]);
const store = mockStore({});

it('renders correctly', () => {
  const wrapper = mount(<Provider store={store}><Component /></Provider>);
  expect(wrapper).toMatchSnapshot();
});

坑 5：无法测试样式

在组件开发中，样式通常是非常重要的一部分。但是，在使用 Enzyme 进行测试时，我们发现有时候无法测试样式。

解决方案：在测试样式时，我们需要使用 Enzyme 的 render 方法渲染组件，并使用 Jest 的 toHaveStyleRule 方法来测试样式。

it('renders with correct styles', () => {
  const wrapper = render(<Component />);
  expect(wrapper).toHaveStyleRule('color', 'red');
});

坑 6：无法测试异步操作

在组件开发中，异步操作时常用到，但是在测试时我们经常会发现无法正确测试异步操作。

解决方案：在测试异步操作时，我们需要使用 async/await 函数和 Jest 的 expect.assertions 方法确保我们的测试完全异步化。

it('loads data asynchronously', async () => {
  expect.assertions(1);
  const wrapper = mount(<Component />);
  await wrapper.instance().componentDidMount();
  expect(wrapper.state().data).toEqual({ foo: 'bar' });
});

坑 7：无法测试被 HOC 包裹的组件

在 React 开发中，我们经常使用 HOC 来增强组件，但是在测试组件时，由于 HOC 的包裹，我们很难测试到最终的渲染效果。

解决方案：在测试被 HOC 包裹的组件时，我们需要使用 find 方法找到最终的渲染组件，并进行测试。

it('renders wrapped component', () => {
  const EnhancedComponent = withHOC(Component);
  const wrapper = mount(<EnhancedComponent />);
  expect(wrapper.find(Component)).toHaveLength(1);
});

坑 8：无法测试 React 动画和过渡效果

在 React 组件开发中，动画和过渡效果通常是非常常见的，但是在使用 Enzyme 进行测试时，我们会发现无法正确测试组件的动画和过渡效果。

解决方案：在测试组件动画和过渡效果时，我们需要使用 waitFor 方法等待动画或过渡效果的完成，并手动断言组件状态。

it('renders with correct animations', async () => {
  const wrapper = mount(<Component />);
  wrapper.setProps({ isVisible: true });
  await waitFor(() => expect(wrapper.state().isAnimating).toBe(true));
  expect(wrapper.state().isVisible).toBe(false);
  await waitFor(() => expect(wrapper.state().isAnimating).toBe(false));
  expect(wrapper.state().isVisible).toBe(true);
});

坑 9：无法测试与其他库的整合

在实际项目中，我们通常会使用其他库和工具来完成某些特定的任务，如 react-router、react-redux 等，但是在测试时，我们会发现无法正确测试与这些库的整合效果。

解决方案：在测试与其他库的整合时，我们需要引入对应的 mock 模块，并手动设置相应的配置，例如：

jest.mock('react-redux', () => ({
  useDispatch: jest.fn(),
  useSelector: jest.fn(),
}));

坑 10：无法测试 SSR 环境下的组件

在实际项目中，我们有时候需要将 React 组件渲染到服务器端，这时需要使用 SSR 技术。但是在测试 SSR 环境下的组件时，我们会发现无法正确测试组件的渲染效果。

解决方案：在测试 SSR 环境下的组件时，我们需要使用 renderToString 方法将组件渲染为字符串，然后使用 Enzyme 的 render 方法将字符串渲染为 React 元素，并进行测试。

it('renders correctly on server', () => {
  const html = renderToString(<Component />);
  const wrapper = render(<div dangerouslySetInnerHTML={{ __html: html }} />);
  expect(wrapper).toMatchSnapshot();
});

总结：

在测试 React 组件时，使用 Enzyme 是非常方便的。
在使用 Enzyme 进行测试时，我们通常会遇到各种各样的问题。
对于这些问题，我们需要一一解决，并编写相应的测试用例来保证组件的正确性。

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