在Jest中使用‘`beforeEach`’global的目的是什么？

Question

我总是能找到以beforeEach全局变量开头的Jest-Enzyme测试用例，如下所示：

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

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

beforeEach全局内的函数在TEST BLOCK describe块内的每个测试之前运行。在这种情况下，在运行每个测试之前，它会浅层呈现Component并分配给wrapper。我不太确定我们为什么要这样做。我们不是故意放慢测试运行时的速度吗？呈现它一次并将其分配给wrapper不是很好吗？beforeEach在这里的用途是什么？在测试React组件时，是否还有其他情况下beforeEach是有益的？

Answer 1

如果您的代码在多个测试中是通用的，那么您可以在每个测试运行之前使用beforeEach进行一些设置，以避免重复。在这种情况下，如果您有多个浅挂载Component的测试，则可以将浅挂载移动到beforeEach，并且组件将在每个测试运行时挂载。通常，您会希望将其与调用wrapper.unmount()的afterEach配对。

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被称为“拆卸”阶段。

我们不是故意放慢测试运行时的速度吗？

不会，因为无论如何您都必须在每次测试中浅层挂载组件。

呈现它一次并将其分配给wrapper不是很好吗？

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

Answer 2

Jest文档建议对为每个测试使用特定全局状态的测试使用beforeEach，例如，在每个测试运行之前重置数据库中的测试数据。

请注意以下情况：

如果beforeEach在describe块内，它将为describe块中的每个测试运行。

使用相同的示例，我们有一个包含测试数据的数据库，如果您的测试不需要为每个测试重置测试数据，则可以在运行任何测试之前使用beforeAll运行一次的代码。