ReactJS、ESLint、Cypressで発生する「ESLint: 'cy' is not defined (Cypress)」エラーを徹底解説！原因と解決策を分かりやすく紹介
ReactJS、ESLint、Cypress における "ESLint: 'cy' is not defined (Cypress)" エラーの解決策
解決策
このエラーを解決するには、以下の 2 つの方法があります。
ESLint プラグイン eslint-plugin-cypress をインストールする
eslint-plugin-cypress プラグインは、ESLint に Cypress テストコードの構文規則を理解させるためのものです。このプラグインをインストールすると、cy オブジェクトを認識し、エラーを回避できます。
インストール方法
npm install --save-dev eslint-plugin-cypress
/// <reference types="cypress" /> コメントを追加する
/// <reference types="cypress" /> コメントを Cypress テストファイルの先頭に記述することで、ESLint に cy オブジェクトを認識させることができます。
例
/// <reference types="cypress" />
describe('My Cypress Tests', function() {
it('should do something', function() {
cy.visit('https://www.example.com');
cy.get('button').click();
});
});
- 上記の 2 つの方法以外にも、ESLint の設定ファイル
.eslintrc.jsonを編集することで、エラーを解決することもできます。
ESLint: 'cy' is not defined (Cypress) エラーは、ESLint が Cypress テストコードの構文規則を理解していないために発生します。このエラーを解決するには、eslint-plugin-cypress プラグインをインストールするか、/// <reference types="cypress" /> コメントを追加する必要があります。
このエラーは、TypeScript を使用している場合にも発生することがあります。その場合は、TypeScript の型定義ファイル @types/cypress をインストールする必要があります。
npm install --save-dev @types/cypress
役立つリソース
// ファイル: example.spec.js
/// <reference types="cypress" />
describe('My Cypress Tests', function() {
it('should do something', function() {
cy.visit('https://www.example.com');
cy.get('button').click();
});
});
// ファイル: example.spec.js
/// <reference types="cypress" />
describe('My Cypress Tests', function() {
it('should do something', function() {
// cy.visit('https://www.example.com');
// cy.get('button').click();
// 上記のコメントを外すと、エラーが発生します。
});
});
TypeScript を使用する場合
// ファイル: example.spec.ts
/// <reference types="cypress" />
describe('My Cypress Tests', () => {
it('should do something', () => {
cy.visit('https://www.example.com');
cy.get('button').click();
});
});
cy.visit()やcy.get()などの Cypress コマンドは、cyオブジェクトを使用して呼び出すことができます。- 上記のコードはあくまで一例です。実際のコードは、テスト対象のアプリケーションや要件によって異なります。
.eslintrc.json ファイルに以下の設定を追加することで、ESLint に cy オブジェクトを認識させることができます。
{
"env": {
"jest": true,
"cypress": true
},
"extends": [
"plugin:cypress/recommended"
]
}
globals オプションを使用する
{
"globals": {
"cy": true
}
}
--env=jest オプションを使用して ESLint を実行する
eslint コマンドを実行する際に --env=jest オプションを指定することで、ESLint に Jest の環境変数を読み込ませることができます。Jest の環境変数には cy オブジェクトが含まれているため、この方法でエラーを解決することができます。
eslint example.spec.js --env=jest
注意事項
- 上記の方法を使用する場合は、ESLint のバージョンと Cypress のバージョンの互換性を確認する必要があります。
ESLint: 'cy' is not defined (Cypress) エラーは、ESLint が Cypress テストコードの構文規則を理解していないために発生します。このエラーを解決するには、上記で紹介した方法のいずれかを使用することができます。
reactjs eslint cypress
