reactjs - enzyme 测试代码内存清理

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 方法被调用，结果被分配给 const。结果是一个 ShallowWrapper 对象。

作为const has a block scope当执行离开 block 时，它被定义 - 在本例中为测试箭头函数 - the Javascript engine will automatically deallocate ShallowWrapper 内存。

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

将组件附加到 DOM

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

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

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

此示例未使用 Enzyme，但与在 Enzyme mount 函数中使用 attachTo 时的概念相同。

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

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