如何测试onChange为功能组件编写测试jest+react测试库

Question

我不能为这行写测试，它说它没有被覆盖，我如何为这行编写测试？

onChange={({ target: { value } }) => setTestData(value)}

文件

import React, { useState } from "react";

import OutlinedInput from "@mui/material/OutlinedInput";

const Test = () => {
const [testdata, setTestData] = useState<any>("");

const [, setTestData2] = useState<boolean>(false);

return (
<OutlinedInput
placeholder="Test"
value={testdata}
onChange={({ target: { value } }) => setTestData(value)}
/>
);
};

export default Test;

玩笑

import React from "react";
import { render } from "@testing-library/react";
import Test from ".";
describe("Test", () => {
test("test1", () => {
const { container } = render(<Test />);
expect(container).toBeInTheDocument();
});
});

Answer 1

您可以使用fireEvent来触发输入框上的更改事件。

选择输入框，然后激发如下事件：

const input = screen.getByRole('input', {name : ''}); // this is sample one , you need to add the role and name value based on what you have.
fireEvent.change(input, {target: {value: 'a'}})

然后，您可以验证状态是否已更新。

请在此处阅读有关fireEvent的更多信息