[解決済み] Jestの `beforeEach` グローバルは何のためにあるのですか？

質問

Jest-Enzymeのテストケースはいつも beforeEach というようなグローバルなものです。

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

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

の中の関数は beforeEach の中の各テストの前に実行されます。 TEST BLOCK describe ブロックを作成します。この場合、浅いレンダリングで Component に代入し wrapper を、各テストを実行する前に実行します。そもそも、なぜこのようなことをするのか、よくわかりません。テストの実行時間を意図的に遅くしているのではないのでしょうか？一度レンダリングして、それを wrapper ? の目的は何ですか？ beforeEach ここで？他のシナリオで beforeEach は、Reactコンポーネントをテストする際に有益なのでしょうか？

どのように解決するのですか？

複数のテストにまたがって共通するコードがある場合には 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 を "teardown "フェーズと呼ぶ。

テストの実行時間を意図的に遅くしていないだろうか？

いいえ、いずれにせよ、各テストでコンポーネントを浅くマウントする必要があるためです。

一度レンダリングして、wrapperにアサインすればOKなのでは？

複数のテストにわたってコンポーネント (または任意の状態性) を持続させると、テストが不安定になる可能性があります。なぜなら (たとえば) テストを異なる順番で実行すると、異なる結果が得られるかもしれないからです。(マウントされたコンポーネントのような) いかなる状態も、各テストの前にセットアップし、 各テストの後に破棄しなければなりません。こうすることで、テストは互いに完全に独立したものになります。