时间戳

首页 > 解决方案 > 酶测试代码内存清理

reactjs - 酶测试代码内存清理

问题描述

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

标签： reactjsenzyme

解决方案

有一种情况我们会想用它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 具有块范围- 在这种情况下是测试箭头函数 - Javascript引擎将自动释放ShallowWrapper内存。

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

将组件附加到 DOM

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

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

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

这个例子没有使用 Enzyme，但是和你attachTo在 Enzymemount函数中使用时的概念是一样的。

我们可以看到我们的 Component 被附加到div文档中的 a，然后ReactDOM.unmountComponentAtNode被调用进行清理。这实际上就是detach所谓的。

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

推荐阅读