在 Enzyme 描述函数中安装和卸载的位置？

Question

我正在尝试在 React 项目中掌握测试组件的窍门。到目前为止，我在单个组件上有一个测试文件，我正在尝试将此文件准备为包含多个测试的测试套件。

import React from 'react';

import Enzyme, { mount } from 'enzyme';

import Adapter from 'enzyme-adapter-react-16';

import HamburgerIcon from './HamburgerIcon';

Enzyme.configure({ adapter: new Adapter() });

describe('<HamburgerIcon />', () => {

  const hamburgerIcon = mount(<HamburgerIcon showOverlay={showOverlay} />);

  it('displays on mobile', () => {

     ...

     ...

  });

  it('has class .open after click', () => {

    ...

    ...

  });

  hamburgerIcon.unmount();

});

我已经删除了两个测试的内容，但基本上这两个测试都包含在一个describe函数中，并且我正在尝试mount使用一次组件和unmount一次组件以保持干燥（不要重复自己） .

我mount将两个it函数放在之前，认为在运行测试之前安装组件是合乎逻辑的。

我unmount在两个测试函数之后放置了，这导致了错误：

方法“模拟”旨在在 1 个节点上运行。0 找到了。

我认为这是因为在实际运行测试之前组件正在卸载。

如果我mount和unmount在这两个测试中，像这样......

describe('<HamburgerIcon />', () => {

  it('displays on mobile', () => {

     const hamburgerIcon = mount(<HamburgerIcon showOverlay={showOverlay} />);

     ...

     ...

     hamburgerIcon.unmount();

  });

  it('has class .open after click', () => {

    const hamburgerIcon = mount(<HamburgerIcon showOverlay={showOverlay} />);

    ...

    ...

    hamburgerIcon.unmount();

  });

});

...测试通过。

不过，这似乎有些过分。如果我的测试套件有十个测试功能呢？我应该在每次测试时都像这样安装和卸载吗？

Answer 1

您可以使用 beforeEach 和 afterEach 函数来设置和清除您的测试。afterEach(() => {&nbsp; &nbsp; //do the unmounting and other stuff here&nbsp; &nbsp; //this will be called after each test case});beforeEach(() => {&nbsp; &nbsp; //do the mounting and setting up the test case here&nbsp; &nbsp; //this will be called before each test case});