Webpack + TypeScript + Vue環境でJestを最低限使えるようにする

はじめに

事前にTypeScript+Vueの環境構築はできているものとします。
今回は下記環境でJestを使えるようにします。

• webpack: 4.29.6
• vue: 2.6.10
• typescript: 3.4.1

インストール

yarn add -D @vue/test-utils jest ts-jest vue-jest

設定

package.json

{
  // 省略
  "scripts": {
    // 省略
    "test": "jest"
  },
  "jest": {
    "moduleFileExtensions": [
      "js",
      "ts",
      "json",
      "vue"
    ],
    "transform": {
      ".*\\.(vue)$": "vue-jest",
      "^.+\\.tsx?$": "ts-jest"
    }
  },
}

テストファイル配置

ソースファイルを配置しているディレクトリ配下に「__tests__」ディレクトリを作成します。

__tests__/ChatMessage.spec.ts

import { shallowMount } from "@vue/test-utils";
import ChatMessage from "../components/ChatMessage.vue";

describe("ChatMessage.vue", () => {
  test("renders props.message when passed", () => {
    const message = "new message";
    const wrapper = shallowMount(ChatMessage, {
      propsData: {
        message
      }
    });
    expect(wrapper.find(".text-box").text()).toMatch(msg);
  });
});

実行

yarn test

問題なければテストが実行されると思います。

参考

https://vue-test-utils.vuejs.org/ja/guides/using-with-typescript.html
https://jestjs.io/docs/ja/configuration#transform-object-string-string