Jest 中“beforeEach”全局的目的是什么？

Question

我总是发现 Jest-Enzyme 测试用例以beforeEach类似于以下内容的全局开头：

describe('TEST BLOCK' () => {
  let wrapper;

  beforeEach(() => {
    wrapper = shallow(<Component />);
  ));
));

beforeEach全局内部的函数在TEST BLOCK describe块内的每个测试之前运行。在这种情况下，它会在运行每个测试之前浅呈现Component和分配给wrapper。我不太确定为什么我们首先要这样做。我们不是故意放慢测试运行时间吗？渲染一次并分配给它不是可以wrapper吗？这里的目的是beforeEach什么？beforeEach测试 React 组件时是否还有其他有益的场景？

Answer 1

如果您的代码在多个测试中通用，您可以beforeEach在每个测试运行之前进行一些设置以避免重复。在这种情况下，如果您有多个浅安装的测试Component，您可以将浅安装移动到一个beforeEach，并且每次测试运行时都会安装该组件。通常，您会希望将它与afterEach您调用的wrapper.unmount().

describe('tests', () => {
  it('does one thing', () => {
    const wrapper = shallow(<Component />);
    // ...test some things
    wrapper.unmount();
  });

  it('does another thing', () => {
    const wrapper = shallow(<Component />);
    // ...test something else
    wrapper.unmount();
  });

  it('does a third thing', () => {
    const wrapper = shallow(<Component />);
    // ...test a third thing
    wrapper.unmount();
  });
});

变成：

describe('tests', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = shallow(<Component />);
  });

  afterEach(() => {
    wrapper.unmount();
  });

  it('does something', () => {
    // ...test something
  });

  it('does something else', () => {
    // ...test something else
  });

  it('does another thing', () => {
    // ...test a third something
  });
});

beforeEach被称为“设置”阶段，被afterEach称为“拆解”阶段。

我们不是故意放慢测试运行时间吗？

不，因为无论如何您都必须在每次测试中浅安装组件。

渲染一次并将其分配给包装器不是可以吗？

在多个测试中保持一个组件（或任何状态）可能会导致不稳定的测试，因为（例如）如果测试以不同的顺序运行，你可能会得到不同的结果。任何状态（例如已安装的组件）都应在每次测试之前设置并在每次测试之后拆除。这使您的测试彼此完全独立。