反应 - 如何测试组件是否具有 value prop

Question

App.js

import "./styles.css";

import React, { useState } from "react";
import Input from "./Input";

export default function App() {
  const [value, setValue] = useState("");
  return (
    <div className="App">
      <Input value={value} setValue={setValue} />
    </div>
  );
}

Input.js

import "./styles.css";

export default function Input({ value, setValue }) {
  return (
    <input
      type="text"
      data-testid="input-0"
      value={value}
      onChange={(e) => {
        setValue(e.target.value);
      }}
    />
  );
}

我想使用 jest 和 react-testing-library 来测试 <Input> 组件。

但我不知道如何处理 value 道具。

这是我制作的测试文件，但我无法继续。

import React, { useState } from "react";
import Input from "@/components/Input/Input";
import userEvent from "@testing-library/user-event";
import { render, screen } from "@testing-library/react";

describe("Testing Input component", () => {
  it("renders a Input", () => {
    const mockSetValue = jest.fn(x => {});
    render(
      <Input
        value={""}
        setValue={(e) => {
          mockSetValue(e)
        }}
      />
    );
    userEvent.type(screen.getByTestId("input-0"), "b");
    expect(screen.getByTestId("input-0")).toHaveValue("b");
  });
});

测试 returns 在我运行之后失败了。

Codesandbox
https://codesandbox.io/s/affectionate-leftpad-cytmf0?file=/src/Input.jsx:0-219

Answer 1

对于 react-testing-library，您想避免测试组件的内部值。
相反，您应该检查呈现的 html 是否正确。

在您的示例中：与其检查 value 属性是否正确，您应该检查输入的 html 元素是否包含文本“测试值”。

参考：https://testing-library.com/docs/guiding-principles

反应 - 如何测试组件是否具有 value prop

react - how to test a component if it has value prop

javascript

reactjs

jestjs

react-testing-library