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();
});
});