はじめに

Next.js環境にtypescript+jestのテスト環境を入れたかったため、インストール内容の覚書として記載

前提条件

jestをtypescriptで認識させるためにはBabelによる方法とts-jestを使う方法が存在するが、ここではts-jestを使った構築方法を記載する

jestとtypescript環境を一括でインストールする

yarn

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

npm

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

以下コマンドで初期化を行うことで、jest.config.jsが生成され、jestに対してts-jestをpresetとして使用するように設定される。

yarn

yarn ts-jest config:init

npm

npx ts-jest config:init

jest.config.js

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

また、package.jsonにてyarn testもしくはnpm testのコマンドでテストが実行できるように以下設定を追加する

 "scripts": {
...
    "test": "jest",
...
  },

テスト対象のtsファイルと、テストコードが記載されたtest.tsを用意する。

sum.ts

export function sum(a, b) {
    return a + b;
}

sum.test.ts

import {sum} from './sum'

test('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3);
});

最後にテストを実行する

yarn

yarn test

npm

npm test

VSCodeの場合はJest Runnerの拡張機能を入れることでエディタ上から実行・デバッグすることができる