2

prop メソッドを受け入れ、ユーザーが何かを入力するとそれを呼び出す Input コンポーネントがあります。コード自体は期待どおりに動作しますが、何らかの理由でテストが失敗します。prop メソッドが呼び出されなかったと考えられます。なぜそれが起こっているのですか?テスト目的で、Jest と react-testing-library を使用します。

そして2問目。実際のアプリケーションでは、その prop メソッドに渡されたパラメーターをテストするというのが私の考えです。実装テストと見なされますか (テストする必要があることはわかっています)。

入力.js

export default function Input({ onChange }) {
  return <input onChange={onChange} />;
}

テスト

import React from "react";
import { render, act, cleanup, fireEvent } from "react-testing-library";
import Input from "./input";

describe("Input tests", () => {
  afterEach(cleanup);

  it("Should call prop function", () => {
    const onChange = jest.fn();
    const { getByTestId } = render(<Input onChange={onChange} />);
    const input = getByTestId("input");

    act(() => {
      fireEvent.change(input, { target: { value: "Q" } });
    });

    expect(onChange).toHaveBeenCalled();
  });
});

https://codesandbox.io/s/y229669nvx

4

2 に答える 2