Enzyme 升级问题及解决方式-JavaScript中文网-JavaScript教程资源分享门户

Enzyme 升级问题及解决方式

前言：Enzyme 是 Facebook 推出的用于 React 应用的 JavaScript 测试工具，可以方便地模拟用户操作，验证组件渲染结果和交互行为的正确性。但是在 Enzyme 的升级过程中，可能会引发一系列的问题，这篇文章就来介绍一下 Enzyme 的升级过程中可能遇到的问题及解决方式。

问题 1：升级 Enzyme 后，组件测试用例全部失败

这是由于 Enzyme 的最新版本更改了 API 接口，原先采用 shallow、mount 的方式测试组件，现在需要采用 configure 和 create 的方式。可以通过以下方式解决：

import { configure, shallow } from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';

configure({ adapter: new Adapter() });
const wrapper = shallow(<MyComponent />);

问题 2：Enzyme 包中找不到 react-dom 的问题

这可能是由于 React V17.0 之后，将 React 的 DOM 渲染方法从 react-dom 包中移动到了 React 包中，从而导致 Enzyme 在使用 shallow 和 mount 的时候找不到 react-dom 相关的 API 接口，可以通过以下方式解决：

import React from 'react';
import { configure, shallow } from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';

configure({ adapter: new Adapter() });
const wrapper = shallow(<MyComponent />, { wrappingComponent: React.Fragment });

问题 3：使用 enzyme-to-json 生成快照失败

Enzyme-to-json 是一个用于将 Enzyme 的测试用例生成 JSON 快照并与之前的快照进行比对的工具，但是在 Enzyme 的升级过程中，可能会出现生成快照失败的问题，可以通过以下方式解决：

import { configure, mountToJSON } from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
import toJson from 'enzyme-to-json';

configure({ adapter: new Adapter() });
const wrapper = mount(<MyComponent />);
expect(toJson(wrapper, { mountToJSON })).toMatchSnapshot();

问题 4：Enzyme 不支持 React Hook 的测试

针对这一问题，Enzyme 目前并没有提供直接的解决方式，但是可以通过直接修改源代码或是使用第三方库来解决：

修改源代码：

const { act } = ReactTestUtils; // 引入 act 方法
act(() => {
  const wrapper = shallow(<MyComponent />);
  wrapper.find('button').simulate('click');
  expect(wrapper.find('span').length).toBe(1);
});

使用第三方库 react-hooks-testing-library：

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

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

  ---------- ------ --- ----- ---- ----------- -- -------- -- -- -
    ----- - ------ - - ------------- -- -------------
    ------ -- -
      ------------------------------------
    ---
    -------------------------------------------
  ---
---展开代码

以上就是 Enzyme 升级过程中可能遇到的问题及解决方式。在实际的开发中，我们需要灵活地运用测试工具，以保证高质量的代码。

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

Enzyme 升级问题及解决方式