Question

我一直在看很多使用Enzyme和Jest测试React和Redux应用程序的示例，几乎没有提到代码清除的示例。使用shallow或mount时，您是否不需要显式调用unmount或detach来保持内存膨胀和运行时间减少？

Answer 1

在某些情况下，我们将要使用detach进行清理。首先让我们看一下简单的shallow和mount情况。

分配变量

在这种“简单”情况下，我们只需将渲染分配给var / const / let。

如果我们看一下Enzyme Github中使用Jest和酶的（简化的）示例。

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存储器。

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

将组件附加到DOM

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

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

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

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

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

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

酶测试代码内存清理

1 个答案: