「テスト」Cypressを使用してE 2 E-インストール/設定をテストする

E 2 Eテストライブラリの1つであるCypressを使用します.

正式な書類から!

❗️ 'cy' is not defined

cypressのインストールが完了すると、次のeslintエラーが発生します.

この問題を解決するために、関連するプラグインをインストールし、eslintcにコードを1行追加しました.
cypress esling plugin

{
  "extends": [
    "react-app",
    "plugin:prettier/recommended",
    "plugin:cypress/recommended"
  ],

1.Cypressウィンドウを開く

公式ファイルに示すように、npx cypress openコマンドを入力するとウィンドウが開きます.

一緒にインストールする例をクリックすると、対応する「サイト」ウィンドウが表示されますが、まだ接続されていないため、画面を表示できません.
ここにはcy.visit()と書いてありますが、公式ドキュメントをもう一度見てみましょう.

2.プロジェクトをcypressにリンクする

cy.visit()の内容は正式なドキュメントで表示します
以下のように接続すればよい.

など、もちろん、孤立したcy.visit()メソッドでこのエラーが発生します.

他のテストコード(describeやitなど)の内部で使用する必要があります.
cypressをインストールすると、cypressフォルダのサブフォルダに複数のサンプルファイルが作成されます.このセクションを参照してください.

3.beforeEach()へのアクセス

❗️ we include it in our beforeEach function so that it runs before each test

beforeEachメソッドは、テストのたびに内部関数を実行します.
このメソッド内でvisit()メソッドを実行すればよい.

4.テストコードを正式に作成!

行動するターゲットは、直接クリックして選択者を見つけることができます.コピーして貼り付けて使えばいいです.

describe('Nav 컴포넌트 테스트', () => {
  beforeEach(() => {
    cy.visit('http://localhost:3000');
  });

  it('지역 선택 모달창 띄우기', () => {
    cy.get('.sc-dkQkyq > :nth-child(1)').click();
  });
});

🛠 テストライブラリへの書き込み

でも、ちょっと不便なところがありました.
E 2 Eテストの利点は、時間を節約できることと、繰り返しが必要なテストロジックを一目で把握できることだと思います.このようにセレクタを使うと、どの部分のテストなのか分かりにくいので、毒性は低いと思います.
だから他の人はこのテストの方法を知っていて、良い方法を見つけました.
ライブラリの追加使用です.
Custom Hookをテストする方法を探している間にTesting Libraryを使用することにした.
このテストライブラリを使用すると、さまざまなライブラリとフレームワークをテストできます.
Cypressをテストするライブラリも含まれています.それを使用しましょう.
Cypress Testing Library
まずインストール後、

npm install --save-dev cypress @testing-library/cypress

インポート後に使用する準備をします.

import '@testing-library/cypress/add-commands';

簡単な使い方は以下の通りですが、まだ感じていないのでバニラを参考にしました.

Cypress Testing Library Github

テキストで要素を見つけることができます.
コードに対応するテキストを明記すると、毒性を高めることができるようです.

  it('findByText', () => {
    cy.findByText('Button Text 1').click().should('contain', 'Button Clicked')
  })

  it('findAllByText', () => {
    cy.findAllByText(/^Button Text \d$/)
      .should('have.length', 2)
      .click({multiple: true})
      .should('contain', 'Button Clicked')
  })

作成したコードを変更しました.

  it('지역선택 모달창 띄우기', () => {
    cy.findByText('어디로 떠날까요?').click();
  });
});

比較してみます.
変更する前に、どの要素をテストするか分かりにくいです.

  it('지역선택 모달창 띄우기', () => {
    cy.get('.sc-dkQkyq > :nth-child(1)').click();
  });

変更すると、クリックする要素のテストコードをより簡単に理解できます.

  it('지역선택 모달창 띄우기', () => {
    cy.findByText('어디로 떠날까요?').click();
  });
});

今から本格的にテストを始めましょう

🛠 BaseURL設定

新しいテストを書き直すので、visitメソッドに入れるURLアドレスが重複しています.

describe('Nav 컴포넌트 테스트', () => {
  beforeEach(() => {
    cy.visit('http://localhost:3000');
  });

  it('지역 선택 모달창 띄우기', () => {
    cy.findByText('어디로 떠날까요?').click();
  });
});

describe('상세페이지 숙박 기간 선택 테스트', () => {
  beforeEach(() => {
    cy.visit('http://localhost:3000/findstays/7');
  });

  it('체크인 날짜 선택', () => {
    //
  });
});

baseURLを設定すると、より簡潔に記述できます.
cypress.jsonで設定しましょう

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

これによりurlを省略して、コードを簡潔に書くことができます!

describe('Nav 컴포넌트 테스트', () => {
  beforeEach(() => {
    cy.visit('/');
  });

  it('지역 선택 모달창 띄우기', () => {
    cy.findByText('어디로 떠날까요?').click();
  });
});

describe('상세페이지 숙박 기간 선택 테스트', () => {
  beforeEach(() => {
    cy.visit('/findstay/7');
  });

  it('체크인 날짜 선택', () => {
    //
  });
});