reactjs - enzyme 测试代码内存清理

我一直在查看很多使用 Enzyme 和 Jest 测试 react 和 redux 应用程序的示例，很少有人提到代码清理。当使用 shallow 或 mount 时，您是否不需要明确调用 unmount 或 detach 来尝试保持内存膨胀和运行时间下降？

最佳答案

在某些情况下，我们希望使用 detach 进行清理。我们先来看简单的 shallow 和 mount 案例。

分配给变量

这种“简单”的情况是我们简单地将渲染分配给 var/const/let 。

如果我们查看 Enzyme Github 中使用 Jest 和 Enzyme 的(缩减)示例。

describe('<MyComponent />', () => {
  it('renders three <Foo /> components', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find(Foo)).to.have.lengthOf(3);
  });

  it('renders an `.icon-star`', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find('.icon-star')).to.have.lengthOf(1);
  });
});

我们可以看到调用了 shallow 方法并将结果分配给了 const 。结果是一个 ShallowWrapper 对象。

作为 const has a block scope 当执行离开它被定义的块时 - 在这种情况下是测试箭头函数 - the Javascript engine will automatically deallocate ShallowWrapper 内存。

正因为如此，我们不需要担心卸载——这仅用于测试特定的 Component 生命周期方法。

将组件附加到 DOM

我们还可以将组件附加到 DOM。

如果我们查看 create-react-scripts 自动生成的测试用例。

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
  ReactDOM.unmountComponentAtNode(div);
});

这个例子没有使用 Enzyme，但它与在 Enzyme attachTo 函数中使用 mount 时的概念相同。

我们可以看到我们的 Component 被附加到文档中的 div ，然后调用 ReactDOM.unmountComponentAtNode 进行清理。 This is actually what detach calls.

我们需要做这个清理，因为对我们渲染的组件的引用存在于我们的块范围之外，因此当执行退出这个块时， 而不是 将被释放。

关于reactjs - enzyme 测试代码内存清理，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52045349/