Help us understand the problem. What is going on with this article?

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

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」エラーが発生

lelouch99v
webアプリ開発を主にやっています。 自分用のメモ + アウトプットの練習として記事を投稿していきたいと思っています。 Rails, Go, React
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした