Enzyme 是 React.js 的一个测试工具库，具有结构清晰、易于使用等特点，并且可以与 Jest 等其他测试框架集成使用。但是在实际使用中，常常会遇到一些常见错误，下面我们就来介绍一些解决方案。
浅渲染
Enzyme 中的浅渲染是指仅仅虚拟渲染成一个元素，而不进行完整的渲染，这在某些情况下可能会导致测试用例不能完全覆盖函数的各种情况。很多的方法被开发者使用，但是他们不能正确地对这些方法进行浅渲染。
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';
it('should render correctly with shallow rendering''() => {
const component = shallow(<MyComponent />);
expect(component).toMatchSnapshot();
});解决方法：使用 .render 方法进行完整的渲染而非浅渲染。
import { render } from 'enzyme';
import MyComponent from './MyComponent';
it('should render correctly with render', () => {
const component = render(<MyComponent />);
expect(component).toMatchSnapshot();
});移除子元素
在 Enzyme 中，使用 detach 方法来移除子元素，并在必要时使用 render 方法重新装配组件。但是，此方法在将组件从 DOM 中卸载时可能会导致一些问题。
-- -------------------- ---- ------- ------ - ------- - ---- --------- ------ ----------- ---- ---------------- ---------- ------ ----- ---------- -- -- - ----- --------- - -------------------- ---- -------------------------------------------------------- ------------------------------------------ -------------------------------------------------------- ---
解决方法：使用 unmount 方法进行组件卸载，而不是使用 detach 方法。
-- -------------------- ---- ------- ------ - ----- - ---- --------- ------ ----------- ---- ---------------- ---------- ------ ----- ---------- -- -- - ----- --------- - ------------------ ---- -------------------------------------------------------- -------------------- -------------------------------------------------------- ---
state 维护
在 Enzyme 中，使用 simulate 方法来模拟事件，假设在使用 simulate 时你也想同时维护相应的 state。大多数的开发者采用了调用 setState，相应的方法是没有触发组件的 render 方法的，以及其他生命周期方法。这对使用 Enzyme 来进行测试的开发者来说是非常危险而不推荐的。
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';
it('should change value on click'() => {
const component = shallow(<MyComponent />);
component.find('.btn').simulate('click');
expect(component.state('value')).toBe('foo');
});解决方法：使用 setState 回调函数。这个回调函数会在 setState 调用后被调用，并且可以在进行浅层渲染时检测到生命周期更改。
-- -------------------- ---- ------- ------ - ------- - ---- --------- ------ ----------- ---- ---------------- ---------- ------ ----- -- ------- -- -- - ----- --------- - -------------------- ---- ----------------------------------------- ------------------- --------------------------------------------- ---
总结
Enzyme 是 React.js 测试开发中必不可少的一个工具库，然而开发者在使用 Enzyme 时经常会遇到一些问题。本文介绍了一些问题的解决方法，希望能对 Enzyme 开发的同学有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e5dc7af6b2d6eab315835c