Jestを使ってフロントエンドのテストコードを書いてみる2 - とあるフロントエンドエンジニアの学習ブログ

前回までのおさらい3行

Jestでサンプルコードとテストコードは書けた
テストも実行できた
でもエラーがたくさん出た

エラーコードチェック

ヒントは

Jest encountered an unexpected token

というエラーと

import { areaCalc } from "./areaCalc";
    SyntaxError: Cannot use import statement outside a module

かな、importでやいのやいの言われている？

https://stackoverflow.com/questions/51994111/jest-encountered-an-unexpected-token

このstackoverflowでもpackage.jsonに追記しろというコメントが多い

「typescript jest package.json」で調べてみよういかふたつの記事を参考にしてみる

https://qiita.com/mangano-ito/items/99dedf88d972e7e631b7

https://maku.blog/p/9xxpe4t/

一応ChatGPTでエラー文の意味も聞いてみよう

このエラーは、JestがTypeScriptの構文（ここでは import 文）を理解できないために発生します。そのため、Jestを設定してTypeScriptを理解できるようにする必要があります。具体的には、ts-jestというパッケージを使用します。これはJestがTypeScriptを理解できるようにする変換器です。また、TypeScript用のJestの設定をするために、jest.config.js（またはjest.config.ts）ファイルをプロジェクトのルートに作成します。まず、ts-jestと@types/jestを開発依存関係としてプロジェクトに追加します。npmまたはyarnを使ってインストールします：

npm install --save-dev ts-jest @types/jest

または

yarn add --dev ts-jest @types/jest

次に、jest.config.jsファイルを作成し、次のように設定します：

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

ここで、preset: 'ts-jest'の行はJestにTypeScriptを変換するためにts-jestを使用するよう指示します。この設定を追加した後、再度テストを実行すると、JestがTypeScriptのコードを適切に解析できるはずです。

うーむどこ参照してもts-jestを入れず、Jestのtypescriptの設定をしていなかったのが原因っぽいな。

エラーを直してみよう

ts-jestをインスト

yarn add --dev ts-jest @types/jest

バージョンが関係してくるはなしはChatGPTに聞かないほうが吉なので、記事の方を信頼してpackage.jsonにjestの設定を追記

{
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "preset": "ts-jest",
    "testMatch": [
      "**/tests/**/*.test.ts"
    ]
  }
}

test用のファイルはtests/以下に記述しているようなので移動してみる

次にtsconfig.jsonを作成し、プロパティを設定します。

{
  "compilerOptions": {
    "baseUrl": "./src/",
    "paths": {
      "#/*": ["*"]
    },   
  }
}

pacage.jsonにもプロパティを追記

{
  "jest": {
    "moduleNameMapper": {
      "^#/(.+)": "<rootDir>/src/$1"
    }
  }
}

tsconfigの"#/*"と、pacage.jsonの"^#/(.+)"の設定で、testファイルのimport文import { areaCalc } from "../src/areaCalc";の../src部分が省略できます。

VScode上でもパスが認識されました。

これでいけるでしょうということで、再びyarn run jestしたところ、またまたエラーが

yarn run v1.22.19
$ jest
ts-jest[ts-jest-transformer] (WARN) Define `ts-jest` config under `globals` is deprecated. Please do
transform: {
    <transform_regex>: ['ts-jest', { /* ts-jest config goes here in Jest */ }],
},
ts-jest[backports] (WARN) "[jest-config].globals.ts-jest.tsConfig" is deprecated, use "[jest-config].globals.ts-jest.tsconfig" instead.
ts-jest[backports] (WARN) Your Jest configuration is outdated. Use the CLI to help migrating it: ts-jest config:migrate <config-file>.              
 FAIL  tests/areaCalc.test.ts                                                                                                                       
  ● Test suite failed to run
                                                                                                                                                    
    Unable to load the module "typescript". Using "ts-jest" requires this package to be installed. To fix it:
        ↳ install "typescript": `npm i -D typescript` (or `yarn add --dev typescript`)

        ↳ install "typescript": `npm i -D typescript` (or `yarn add --dev typescript`)

      at Importer.exports.Importer.Importer._import (node_modules/ts-jest/dist/utils/importer.js:169:15)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.331 s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

なんとそもそもTypeScript入れてないという失態！

エラーログのいう通り以下を実行してみます。

yarn add --dev typescript

インストールが完了して、もう一度yarn run jestを実行すると・・・

テスト成功！

これで最低限のJestをTypeScriptでテストする環境が整いました。

今回はJestうんぬんというよりTypeScriptの環境設定でだいぶ引っ掛かりましたね。

Jestの習得も急ぎではないから、次はTypeScriptの勉強を進めていこうかなと思いました（小並感）