[Jest][ユニットテスト](1)テストコード作成前に設定・エラー解決(jsx、未処理のPromiseRejection、TestingLibraryElementError)

項目の重要な部分の予約期間選択機能に誤りがあることが判明した.
予想通りに実行されていない場所もありますが、ブラウザで1つずつ実行してテストするのではなく、テストコードを作成して使用することにしました.
TDDをしっかり行いたいと思います.
新規事業からTDDを開始するには時間が足りないが、機能リストが不足しているため、逆に柔軟に対応できないリスクがある.すべての機能が実装された後、再構築段階でテストを行うことで、テスト範囲と内容を明確にするだけでなく、エラーの解決にも役立つと思います.

テスト内容

テストする内容は、詳細ページの日付予約コンポーネントの関数です.

日付を選択ボタンをクリックすると、カレンダーウィンドウ

が開きます.

カレンダウィンドウをレンダリングした後、所定の日付でない

を取得します.

カレンダを選択不可能予約日としてマークする

チェックイン日を選択すると、checkFirstUnavailableDates()が実行されます.この関数は、予約不可日を巡り、選択したチェックイン日以降の最初の予約不可日を返します.

はtrueを返し、最初の予約不可日以降のすべての日付がblockによって処理されるようにする.

でも….テストコードを作成する前の設定から多くのエラーが発生したため,この部分から整理を開始する.

💪 面と向かっての間違いは、ゆっくり解決しましょう。

こっちへ来い.しかし、最初からうまくいかなかった.
テストコードの書き方もわかりませんが、設定から困難に直面しました.
直面している間違いをよく整理する.

エラーjsx構文変換ファイル

Support for the experimental syntax 'jsx' isn't currently enabled

jsx構文jestが理解できないため、設定エラーが必要で、バーベルをインストールした後に設定します.
プリセット-evnとreactに加えて、jsx構文をプラグインに変換できるものが必要です.

module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }],
    '@babel/preset-react',
  ],
  plugins: ['@babel/plugin-transform-react-jsx'],
};

コメント:
リファレンススタックオーバーフロー回答
参考韓羽バニラbabel-jestについて
Jest公式文書-構成
Jest公式文書-code-transformation

エラー非同期処理

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "ReferenceError: fetch is not defined".] {code: 'ERR_UNHANDLED_REJECTION'

fetch関数はエラー文をキャプチャせずに実行されるため、テストするコンポーネントコードにfetch関数の区切りにcatch文を加えて異常処理を行うだけでエラーが発生します.

  async function getUnavaliableDate() {
    try {
      const res = await fetch(unAvailableDatesUrl(stayIdParams, today));
      const resJson = await res.json();
      const undates = resJson.data.date;
      setUnavailableDates(undates);
    } catch (err) {
    ...

エラーテストプリファレンスパラメータ(jsdom)

公式文書ではJestがテストを実行する環境は基本的にノードであり,Webアプリケーションを開発する際にはブラウザのような環境jsdomを使用することが要求される.
@jset-environmentドキュメントブロックをファイルに追加した後、テストに使用する環境を指定できます.

一番上に次のように記入します.

/**
 * @jest-environment jsdom
 */

import React from 'react';
import ReservationDate from './ReservationDate';
import { screen, render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

describe('ReservationDate', () => {
  let getUnavaliableDate;
  let startDate;
  ...

コメント:
Jest公式文書-test環境

😃 エラー解決!本格的にテストを始めましょう。

テストコードの作成に専念できるように、簡単なテストを作成して実行します.
テストを行う部分はここです.詳細ページのReservationDateコンポーネントです.「日付を選択してください」ボタンをクリックすると、カレンダーが表示され、必要な期間を選択できます.

まず、設定が完了した後にテストが正常に実行されるかどうかを検証するために、簡単なテストコードだけを作成し、実行を開始します.
次に、構成部品をレンダリングした後、「日付を選択してください」ボタンを見つけてクリックしたテストコードを示します.

/**
 * @jest-environment jsdom
 */

import React from 'react';
import ReservationDate from './ReservationDate';
import { screen, render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

describe('ReservationDate', () => {
  let getUnavaliableDate;
  let startDate;
  let endDate;
  let setStartDate;
  let setEndDate;
  beforeEach(() => {
    getUnavaliableDate = jest.fn();
    setStartDate = jest.fn();
    setEndDate = jest.fn();
  });
  it('날짜선택 버튼 클릭 시 달력 창 띄우기', async () => {
    await render(
      <ReservationDate
        startDate={startDate}
        endDate={endDate}
        setStartDate={setStartDate}
        setEndDate={setEndDate}
      />
    );
    const selectDateButton = screen.getByText('날짜를 선택해주세요');
    userEvent.click(selectDateButton);
  });
});

関数は冗談です.fn()木関数を用いた.

userEventを使用してイベントを処理します.

ふーん、成功した!
テストは正常に動作し、これまでに作成したテストコードも合格しました.

では、詳細なテストコードの作成を本格的に始めましょう.