React 是一个广泛使用的前端框架，而 Enzyme 则是 React 的测试工具之一。通过 Enzyme，开发者可以对 React 组件进行测试，以保证代码的质量和稳定性。然而，在实际开发中，我们常常遇到一些问题。本文将探讨在 React + Enzyme 测试中经常遇到的问题，并提供相应的解决方案。
问题一：如何测试异步请求？
在 React 中，异步请求是很常见的。但是，在测试中，异步请求会带来一些麻烦。例如，如果我们要测试一个包含异步请求的组件，那么测试会在请求完成之前结束，从而导致测试失败。那么，如何测试异步请求呢？
解决方案：使用 async/await 或者 done 回调函数。
使用 async/await 可以等待异步请求完成之后再进行测试。例如：
it('fetches data from server when server returns a successful response', async () => {
const response = { data: { name: 'John' } };
axios.get.mockResolvedValue(response);
const wrapper = mount(<MyComponent />);
await wrapper.instance().componentDidMount();
expect(wrapper.state('name')).toEqual(response.data.name);
});如果你不喜欢 async/await，也可以使用 done 回调函数。例如：
-- -------------------- ---- -------
----------- ---- ---- ------ ---- ------ ------- - ---------- ---------- ------ -- -
----- -------- - - ----- - ----- ------ - --
--------------------------------------
----- ------- - ------------------ ----
--------------------------------------- -- -
----------------------------------------------------------
-------
---
---问题二：如何测试 Redux？
在 React 中，Redux 是一种常用的状态管理工具。但是，在测试中，Redux 也会带来一些麻烦。例如，如果我们要测试一个包含 Redux 的组件，那么我们需要模拟 Redux 的 store。那么，如何测试 Redux 呢？
解决方案：使用 redux-mock-store 和 Provider。
redux-mock-store 可以帮助我们模拟 Redux 的 store，而 Provider 则可以将模拟的 store 注入到组件中。例如：
-- -------------------- ---- -------
------ ------------------ ---- -------------------
------ - -------- - ---- --------------
----- --------- - ---------------------
----- ----- - --------------
----------- ------- ---------- -- -- -
----- ------- - ------
--------- --------------
------------ --
-----------
--
----------------------------------
---问题三：如何测试组件的生命周期方法？
在 React 组件中，生命周期方法是非常重要的。但是，在测试中，我们也需要测试这些生命周期方法。那么，如何测试组件的生命周期方法呢？
解决方案：使用 mount 和 simulate。
可以使用 mount 方法将组件渲染到虚拟 DOM 中，然后使用 simulate 方法模拟事件触发，从而测试组件的生命周期方法。例如：
it('calls componentDidMount', () => {
const componentDidMountSpy = jest.spyOn(MyComponent.prototype, 'componentDidMount');
const wrapper = mount(<MyComponent />);
expect(componentDidMountSpy).toHaveBeenCalledTimes(1);
});结论
在 React + Enzyme 测试中，我们常常遇到一些问题。但是，通过使用 async/await 或者 done 回调函数、redux-mock-store 和 Provider，以及 mount 和 simulate 等方法，我们可以解决这些问题。同时，这些方法也可以帮助我们更好地测试 React 组件，以保证代码的质量和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67411cc2d40a3cb159e8ec13