JestでテストファイルごとにtestEnvironmentを切り替える方法

目次

前段 (動機)

enzymeから@testing-library/reactへの乗り換えの際に、testEnvironmentをjsdomに設定する必要があるという事だったので、素直にjsdomに変更。

詳細は以下より(本記事の内容とはあまり関係ないです。とばして問題ないです。)

「うごいた、うごいた」と浮かれていたのですが、しばらくして他のテストを実行した所、@testing-library/react関連以外のテストが全滅…

当然といえば当然ですが、node環境のテストがきっちり全部落ちていました(´▽`;)ハハハハ

jsdom環境とnode環境で分けて実行すれば動きそうですが、面倒なので同時に実行できる方法がないか探してみました。

リサーチ

「jest jsdom node same time」で検索したところ、それっぽいissueを発見

docblockでファイルごとに切り替え可能にしようみたいな感じで、最終的に以下のドキュメントへのリンクがすすめられています。

対処法

以下、上記のページから@jest-environment docblockに関する部分の引用です。

By adding a @jest-environment docblock at the top of the file, you can specify another environment to be used for all tests in that file

@jest-environment docblock をファイルの一番上に追加すると環境を変更できるっぽいです。

実際の追加は以下のような感じ

/**
 * @jest-environment jsdom
 */

test('use jsdom in this test file', () => {
  const element = document.createElement('div');
  expect(element).not.toBeNull();
});

実際に試してみたところ、問題なく環境の切替ができていました。

ファイルトップ以外の追加も試してみましたが、ドキュメントの記載の通り、ファイルトップ以外では環境の切り替えはされない模様です。

参考ページ

@jest-environment docblock 追加プルリクの実装してるっぽい部分