くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

TypeScriptでもjestしたい

TypeScriptでjestするときの備忘録。
ts-jestなんてものがあるらしい。。

インストール

$ npm i -D jest
$ npm i -D typescript
$ npm i -D ts-jest @types/jest

package.jsonの設定

{
  ...
  "scripts": {
    "build": "tsc",
    "test": "jest"
  },
  "devDependencies": {
    //...
  },
  "jest": {
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ],
    "transform": {
      "^.+\\.(ts|tsx)$": "ts-jest"
    },
    "globals": {
      "ts-jest": {
        "tsConfigFile": "tsconfig.json"
      }
    },
    "testMatch": [
      "**/__tests__/*.+(ts|tsx|js)"
    ]
  }
}

テストを書く

シンプルなテスト
test("sum", () => {
  expect(1 + 1).toBe(2);
});
beforAllやafterAllもある
beforeAll(() => {
  // 全体の実行前の処理: Promiseをreturnすることもできる
});

afterAll(() => {
  // 全体の実行後の処理: Promiseをreturnすることもできる
});

test("sum", () => {
  expect(1 + 1).toBe(2);
});
describeでまとめることもできる
beforeEach(() => {
  // 各テストケースの実行前の処理: Promiseをreturnすることもできる
});

test("sum", () => {
  expect(1 + 1).toBe(2);
});

describe('matching cities to foods', () => {
  beforeEach(() => {
    // 各テストケースの実行前の処理: Promiseをreturnすることもできる
  });

  test("sum-failed", () => {
    expect(1 + 1).toBe(1);
  });
});

テストを実行する

// 全部のテストを実行
$ npm run test

// ファイルを指定して実行: ファイルを指定
$ npm run test <test-file>.ts

// 1ケースを指定して実行: testの名前やdescribeの名前を指定
$ npm run test -- -t "test-name"

他にも--watch--collect-coverageなどのオプションもある感じ。

参考になる書籍

実践TypeScript ~	BFFとNext.js&Nuxt.jsの型定義~

実践TypeScript ~ BFFとNext.js&Nuxt.jsの型定義~

速習TypeScript: altJSのデファクトスタンダートを素早く学ぶ! 速習シリーズ

速習TypeScript: altJSのデファクトスタンダートを素早く学ぶ! 速習シリーズ

TypeScript実践プログラミング (Programmer's SELECTION)

TypeScript実践プログラミング (Programmer's SELECTION)

参考にしたサイト様