私は React Typescript プロジェクトで Cypress を使い始めました。いくつかの簡単なテストを実行しました。
describe('settings page', () => {
beforeEach(() => {
cy.visit('http://localhost:3000')
});
it('starts in a waiting state, with no settings.', () => {
cy.contains('Waiting for settings...')
});
it('shows settings once settings are received', () => {
const state = cy.window().its('store').invoke('getState')
console.log(state) // different question: how do I get this to be the state and not a $Chainer?
});
});
Cypress では問題なく動作します。しかし、Webstorm では Typescript エラーが発生し、 はcy定義されていません (TS および ESlint エラー) というエラーと、 というエラーが発生しdescribeますall files must be modules when the --isolatedModules flag is provided。
TS ファイルの代わりに JS ファイルにすることはできますが、それでもcyis not defined になります。
試してみましたimport cy from 'cypress'が、ParseError: 'import' and 'export' may appear only with 'sourceType: module'それはまた別の問題です (テストの作成は少しずつ進めているところですが、まだ何もインポートする必要はありません...)
/// <reference types="cypress" /> 動作しません。
アップデート（ある意味）
指示に従いましたここ少し進歩しました。すでにかなり充実した React webpack.config.dev.js に、推奨コードを追加しました:
{ // TODO inserted for cypress https://stackoverflow.com/a/56693706/6826164
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
ルールのリストの最後 (ファイル ローダーの直前) に追加します。
これを実行し、記事に示されているようにファイルを設定するとplugins/index、Cypressの「ホーム画面」が実行されますが、テストを開くためにクリックすると、非常に多くの秒数がかかり、次のような多くのエラーが表示されます。
integration\settings.spec.ts
This occurred while Cypress was compiling and bundling your test code. This is usually caused by:
A missing file or dependency
A syntax error in the file or one of its dependencies
Fix the error in your code and re-run your tests.
./cypress/integration/settings.spec.ts
Module build failed (from ./node_modules/ts-loader/index.js):
Error: TypeScript emitted no output for C:\Users\...\...\front_end\cypress\integration\settings.spec.ts.
@ multi ./cypress/integration/settings.spec.ts main[0]
実際には、次のような Typescript 出力が大量に続きます。
C:\Users\jtuzman\dev\...\...\src\__tests__\Errors.test.tsx
[tsl] ERROR in C:\Users\jtuzman\dev\...\...\src\__tests__\Errors.test.tsx(37,41)
TS2339: Property 'toBeTruthy' does not exist on type 'Assertion'.
C:\Users\jtuzman\dev\...\...\src\__tests__\Errors.test.tsx
[tsl] ERROR in C:\Users\jtuzman\dev\...\...\src\__tests__\Errors.test.tsx(41,45)
TS2339: Property 'toBeDefined' does not exist on type 'Assertion'.
これらはテスト ファイル外のコードに対するエラーになっていることに注意してください (おそらくそれは理にかなっています)。それらの多くは、Cypress ではなく Jest を使用しているファイルに対するものであり、ご覧のとおり、多くのエラーは、Jest ではないAssertion型を推論し、マッチャーが間違っていると判断することに関連しているようです。expecttoEqual
その間、Webstorm では ESLint がまだすべての my について文句を言いcy、TypeScript は出力に記載されているすべての Jest アサーションに下線を引いています。
これはすべて ts テスト ファイルで行われます。ファイルの名前を js に変更すると、ファイルにテストがないと表示されます。
何か助けてください。私は Cypress が大好きですが、それを完全に動作させるのに非常に苦労しています。
ベストアンサー1
Cypressバージョン4以降にアップグレードした後、このエラーが発生しました。eslint-plugin-cypress https://github.com/cypress-io/eslint-plugin-cypressそして、package.json または別の設定ファイル内の extends 設定でこれを有効にします。
"eslintConfig": {
"extends": [
"plugin:cypress/recommended"
]
},