JestでJest encountered an unexpected tokenエラーがでる

はじめに

Jestを導入して、テストを実行したところエラーがでたのでまとめます

問題

以下のコマンドでテストを実行するとエラーがでました

$ npm run test

● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    SyntaxError: /home/watanabejin/workspace/Presenter.spec.ts: Missing semicolon. (11:22)

       9 |   describe("display", () => {
      10 |     test("表示できる", () => {
    > 11 |       const state = {} as Arttate;
         |                       ^

Jestを使うために、npm install jestを行った状態です

解決方法

こちらをみたところ、設定ファイルが必要なのを思い出しました。

しかし、この設定ファイルはCommonJSになっているので、ESModuleに変えて以下のようにしました

jest.config.js

const config = {
  "roots": [
    "<rootDir>/src"
  ],
  "testMatch": [
    "**/__tests__/**/*.+(ts|tsx|js)",
    "**/?(*.)+(spec|test).+(ts|tsx|js)"
  ],
  "transform": {
    "^.+\\.(ts|tsx)$": "ts-jest"
  },
};

export default config;

テストを実行したところ以下のエラーに変わりました

  ● 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`)

TypeScriptを入れろと言われているので以下のコマンドを実行しました

$ npm i -D typescript

すると問題なくJestが実行できるようになりました

おわりに

久しぶりにJestを導入したので思ったより時間がかかりました
CommonJSとESModuleのところは注意が必要です

参考