Cypress と Jest の TypeScript での設定

Jest が既存で存在するプロジェクトに Cypress を導入しようとしたところ型の問題で詰まりました。
以下のような以前見られていた問題となります。

結論としては Jest の TypeScript 設定を確認せずに進めようとしたことが問題だった模様です。

TypeScript を使用する

Nuxt.js の設定により Jest が含まれる状態から進めたので以下の手順のみを追加で行っています。

追加のインストール

yarn add -D @types/jest ts-jest

• tsconfig.json の types に @types/jest を追加

こちらのリポジトリにて Cypress の設定がある状態で型を確認できることを確認しています。

tsconfig.json での指定でない場合

global.d.ts などで使用する型を指定している場合、
tsconfig.json の types 指定によりそれを上書きしてしまうっぽいので
どちらかに統一したほうが良い模様

global.d.ts

/// <reference types="@types/jest" />

ESLint について

cypress/tsconfig.json を設置した際に .eslintrc.js でのエラーが発生する模様

Parsing error: ESLint was configured to run on `<tsconfigRootDir>/cypress/support/auth-provider-commands/auth0.ts` using `parserOptions.project`: <tsconfigRootDir>/tsconfig.json
However, that TSConfig does not include this file. Either:
- Change ESLint's list of included files to not include this file
- Change that TSConfig to include this file
- Create a new TSConfig that includes this file and include it in your parserOptions.project
See the typescript-eslint docs for more info: https://typescript-eslint.io/linting/troubleshooting##i-get-errors-telling-me-eslint-was-configured-to-run--however-that-tsconfig-does-not--none-of-those-tsconfigs-include-this-fileeslint

これに対し cypress/tsconfig.json を使用するよう cypress/.eslintrc.js を設置し、
parserOptions.tsconfigRootDir を設定することで解決できる模様

cypress/.eslintrc.js

module.exports = {
  extends: ['../.eslintrc.js'],
  parserOptions: {
    tsconfigRootDir: __dirname,
  },
}