Jest・CypressのProperty 'toBe' does not exist on type 'Assertion'を解決する

概要

JestとCypressはテストフレームワーク＆ツールとして有名です。
同じプロジェクト上で共存していると、エラーが発生する場合があります。

今回はこの２つを共存させる方法について考えていきます。

環境

cypress: ^9.6.1  
jest: ^27.5.1

エラー原因

エラーが出た時のtsconfig.jsonは以下のような設定でした。

tsconfig.json

{
  "compilerOptions": {
    ...
    "types": ["cypress",　"jest"]
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
}

この状態で、テストファイルを作成してみると以下のようなエラーが出ます。
Property 'toBe' does not exist on type 'Assertion'

この地点でjestにあるはずのアサーションがない、ということがわかります。ですがtypesに設定しています。
この周りが関係していることが考えられます。

結果

mocha自体にアサーション機能はなく、chaiを使用しています。そのchaiがjestの内容と競合してしまい、エラーが出ているようです。

cypressで使用するテストフレームワークがmochaです。
そのjestとchaiが同時に読み込まれるのを回避すればエラーが出ることはなさそうです。

対策

tsconfig.jsonを見直します。
まずjestだけの型を読み込むようにして、excludeとしてcypressディレクトリを設定します。

tsconfig.json

{
  "compilerOptions": {
    ...
    "types": ["jest"]
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules", "cypress"]
}

cypressディレクトリ直下に新たにtsconfig.jsonを作成します。
ここでcypressの型を読み込んでいきます。

cypress/tsconfig.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "types": ["cypress"],
    "isolatedModules": false
  },
  "include": ["../node_modules/cypress", "./**/*.ts"],
  "exclude": []
}

最後に

テストフレームワーク同士で競合が起きてしまうのは想像できませんでした。
しかし類似したライブラリを使用すると競合してしまうことがわかりました。