Nuxt.jsでjestとcypressでテストしまくる。with Typescript

2021-01-31tech

Typescript を使って Nuxt.js で開発をしながら、各々のコンポーネントのテストを jest で、e2e テストやインテグレーションテストを cypress で行う方法を紹介します。 jest と cypress の型情報のバッティング部分に罠があるのでその辺りを特に解説します。

サンプルは Github で公開しています。
https://github.com/rhythm191/nuxt-typescript-jest-cypress

準備

npx create-nuxt-app で Typescript・jest を使う Nuxt.js アプリケーションを作成しましょう。その後、cypress のセットアップをします。

npm i -D cypress @types/cypress eslint-plugin-cypress

その後、npx cypress openで初期設定をします。 cypress のアプリが立ち上がってきた後、cypress のフォルダを作成するようにします。この時できるcypress/integrationフォルダがテストスクリプトの格納フォルダになります。

また、cypress.jsonを編集し、アクセスする URL を明示しましょう。

{
  "baseUrl": "http://localhost:3000"
}

jest と cypress の型情報が欲しいので、tsconfig.json の include に型情報を追加します。

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": [
      "ESNext",
      "ESNext.AsyncIterable",
      "DOM"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@nuxt/types",
      "@types/node",
+     "jest",
+     "cypress"
    ]
  },
  "exclude": [
    "node_modules",
    ".nuxt",
    "dist"
  ]
}

eslintrc.jsonのプラグインにplugin:cypress/recommendedを追加する。

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
+   "cypress/globals": true,
  },
  extends: [
    "@nuxtjs/eslint-config-typescript",
    "prettier",
    "prettier/vue",
+   "plugin:cypress/recommended",
    "plugin:prettier/recommended",
    "plugin:nuxt/recommended",
  ],
+ plugins: ["cypress", "prettier"],
  // add your custom rules here
  rules: {},
};

そして、cypress のテストコマンドを実行して、テストができることを確認します。（このコマンドは package.json に入れても良い）

npx cypress run

エラーメッセージ「Property ‘toBeTruthy’ does not exist on type ‘Assertion’.ts(2339) 」

jest のテストスクリプト側でで上記のようなエラ〜メッセージが出た場合は、tsconfig.json に exclude にcypressを追加すれば良いです。

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": [
      "ESNext",
      "ESNext.AsyncIterable",
      "DOM"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@nuxt/types",
      "@types/node",
      "jest",
      "cypress"
    ]
  },
  "exclude": [
    "node_modules",
    ".nuxt",
    "dist",
+   "cypress"
  ]
}