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

Jestのインストール〜実行の流れ

Jestインストール〜実行まで

参照先:https://github.com/facebook/jest

①Jestをインストール

npm install --save-dev jest

②基本設定ファイルの作成

1.node_modules/.binに対してinitで作成。

./node_modules/.bin/jest --init

2.基本的にEnter連打でok

The following questions will help Jest to create a suitable configuration for your project

✔ Would you like to use Jest when running "test" script in "package.json"? … yes
✔ Would you like to use Typescript for the configuration file? … no
✔ Choose the test environment that will be used for testing › node
✔ Do you want Jest to add coverage reports? … no
✔ Which provider should be used to instrument code for coverage? › v8
✔ Automatically clear mock calls and instances between every test? … no

✏️  Modified /Users/masahiro/Documents/react-router-test/project/package.json

📝  Configuration file created at /Users/masahiro/Documents/react-router-test/project/jest.config.js

③babelのインストール

1.import,exportをテスト環境で使用する場合、babelのインストールが必要。
下記コマンドでインストールする

npm install --save-dev babel-jest @babel/core @babel/preset-env

2.{}package.jsonの"devDependencies"に下記が追加されていればok

 "devDependencies": {
    "@babel/core": "^7.12.7",
    "@babel/preset-env": "^7.12.7",
    "babel-jest": "^26.6.3",
    "jest": "^26.6.3"
  }
}

④基本ファイルの作成

1.babel.config.jsファイルを作成し、下記のコードを追加

module.exports = {
  presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
};

⑤testフォルダの作成

1.__test__フォルダの作成し、適当なコードを入力

import QuizFetcher from '../../../src/data_fetchers/QuizFetcher';

describe('QuizFetcherのテスト', () => {
  it('クラスチェック', () => {
    console.log('@@@@@@');
  });
});

⑥テスト実行

1.npm testを実行

npm test

2.下記の表示が出ればok

 PASS  __tests__/src/data_fetchers/QuizFetcher.js
  QuizFetcherのテスト
    ✓ クラスチェック (11 ms)

  console.log
    @@@@@@

      at Object.<anonymous> (__tests__/src/data_fetchers/QuizFetcher.js:5:13)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.775 s, estimated 1 s
Ran all test suites.

以上!!

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