LoginSignup
2

More than 3 years have passed since last update.

Next.jsにjestとenzymeを導入する

Posted at

jestインストール

jestインストール

$ npm install --save-dev jest 

jsx構文のトランスパイルのため、babel等をインストール

$ npm install --save-dev babel-jest babel-core babel-preset-env babel-preset-react

jest設定

jest設定ファイルを生成

$ jest --init

これで最低限jestでテスト実行できる。
.jsをjsx構文で解釈させるために設定が必要。

修正

jest.config.js
modlue.exports = {
    // ...
    transform: { "^.+\\.jsx?$": "babel-jest" } // 拡張子がjs,jsxのファイルをbabel-jestでトランスパイルさせる
    // ...
}

追加

jest.config.js
module.exports = {
  presets: ["@babel/preset-env", "@babel/preset-react"]
};

Enzymeのインストール

インストール

yarn add --dev enzyme enzyme-adapter-react-16

Enzymeの利用時は一度だけEnzyme.configure()を呼ぶ必要があるため、下記のスクリプトを追加。

jest.setup.js
import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";

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

Jestのテスト前に実行されるようにする。

jest.config.js
module.exports = {
  // ...
  setupFiles: ['./jest.setup.js'],
  // ...
}

jest実行でエラー

「regeneratorRuntime is not defined」

jestのテスト対象コードでasync/awaitを使っているとこのエラーが出るようです。

回避方法は以下。

.babelrcを以下のようにする
.babelrcはpackage.jsonと同じディレクトリに配置しました。

{
  "presets": [
    [
      "@babel/preset-env", {
        "targets": {            // babelのターゲットを指定
          "node": "current"
        }
      }
    ]
  ]
}

参考

Next.jsのプロジェクトにJestとEnzymeを導入する手順
asyncを使用したコードをjestでテストすると「regeneratorRuntime is not defined」エラーが発生

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2