在前端开发的过程中，测试是不可避免的一项工作，它可以帮助开发者提高代码质量和稳定性。而对于 React 开发者来说，Enzyme 和 Jest 是两个常用的测试工具。但是在实际使用中，我们可能会遇到 Enzyme 与 Jest 不兼容的情况，很多测试方法无法正常运行。本文将为大家介绍三种 Enzyme 与 Jest 不兼容的测试方法，以及如何解决它们。
1. 测试 React Portal
在 React 中，Portal 是一种可以将组件渲染到某个 DOM 节点之外的组件。由于它的特殊性，我们需要使用 React 的 createPortal 方法来创建它，并将其挂载到一个指定的 DOM 节点下面。但是，由于 Enzyme 的限制，我们无法在测试中获得将 Portal 组件渲染到指定节点的状态。
解决方法：
可以使用 React 的 Test Utilities 中的 findRenderedDOMComponentWithClass 方法来获取 Portal 渲染到 DOM 树中的 HTML 元素，然后使用 Jest 的 DOM Testing Library 来对元素进行断言。
示例代码：
import React from 'react';
import ReactDOM from 'react-dom';
import { findRenderedDOMComponentWithClass } from 'react-dom/test-utils';
import { render, cleanup } from '@testing-library/react';
import ModalPortal from './ModalPortal';
afterEach(cleanup);
describe('<ModalPortal />', () => {
it('renders a modal', () => {
const div = document.createElement('div');
ReactDOM.render(<ModalPortal />, div);
const modalContainer = findRenderedDOMComponentWithClass(div, 'modal-container');
expect(modalContainer).toBeTruthy();
});
it('renders a close button', () => {
const { getByTestId } = render(<ModalPortal />);
const closeButton = getByTestId('close-button');
expect(closeButton).toBeTruthy();
});
});2. 测试 React HOC（高阶组件）
在 React 中，HOC 是一个常见的模式，可以将一些重复的逻辑提取出来并应用到多个组件上。然而，由于 Enzyme 的限制，我们无法测试高阶组件提供的新 props 和 state。
解决方法：
可以使用 React 的 Test Utilities 中的 isDOMComponent 方法判断是否渲染后的组件是 HOC 组件，如果是，则可以通过 mock 组件的 props 或 state 来进行测试。
示例代码：
import React from 'react';
import { mount } from 'enzyme';
import withValidation from './withValidation';
describe('withValidation', () => {
it('validates the input value', () => {
const MockComponent = () => <input />;
const EnhancedComponent = withValidation(MockComponent);
const wrapper = mount(<EnhancedComponent />);
const input = wrapper.find(MockComponent).find('input');
input.simulate('change', { target: { value: 'hello' } });
expect(wrapper.state('isValid')).toBeFalsy();
});
});3. 测试使用 React Context 的组件
在 React 中，Context 能够穿透组件树，控制所有子组件的数据状态。但由于 Enzyme 的 mount 方法只渲染当前组件和其子组件，所以我们无法测试整个组件树中所有组件的数据状态。
解决方法：
可以将测试库选择为 react-testing-library，它使用的是组件的真实 DOM，因此可以测试整个组件树中所有子组件的数据状态。
示例代码：
import React from 'react';
import { render } from '@testing-library/react';
import { ThemeContext } from './ThemeContext';
import ThemeTogglerButton from './ThemeTogglerButton';
describe('<ThemeTogglerButton />', () => {
it('renders correctly when theme is light', () => {
const theme = { background: 'white', color: 'black' };
const { getByTestId } = render(<ThemeContext.Provider value={theme}><ThemeTogglerButton /></ThemeContext.Provider>);
const button = getByTestId('theme-toggler-button');
expect(button.getAttribute('style')).toBe(`background: ${theme.background}; color: ${theme.color};`);
});
it('renders correctly when theme is dark', () => {
const theme = { background: 'black', color: 'white' };
const { getByTestId } = render(<ThemeContext.Provider value={theme}><ThemeTogglerButton /></ThemeContext.Provider>);
const button = getByTestId('theme-toggler-button');
expect(button.getAttribute('style')).toBe(`background: ${theme.background}; color: ${theme.color};`);
});
});最后，总结一下本文讲解的三种 Enzyme 与 Jest 不兼容的测试方法以及解决方案：
- 测试 React Portal：使用 React 的 Test Utilities 中的 findRenderedDOMComponentWithClass 方法和 Jest 的 DOM Testing Library。
- 测试 React HOC：使用 React 的 Test Utilities 中的 isDOMComponent 方法和 mock 组件的 props 或 state。
- 测试使用 React Context 的组件：使用 react-testing-library 选择渲染组件，测试整个组件树中所有子组件的数据状态。
希望本文能够帮助大家更好地理解 Enzyme 和 Jest 在测试中的不兼容问题，提高测试的效率和质量。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a37122add4f0e0ffb95d64