酶测试代码内存清理

Question

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

Answer 1

在某些情况下，我们将要使用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调用的方法和分配给 a 的结果const。结果是一个ShallowWrapper对象。

作为const 具有嵌段范围时执行的叶子定义它的块-在这种情况下，测试箭头功能-的Javascript引擎将自动解除分配的ShallowWrapper存储器。

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

将组件附加到 DOM

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

如果我们看一下由create-react-scripts.

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

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

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

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