Typescript 中的 React 测试库

Question

我正在关注关于 React.js 测试库的教程，并尝试在 Typescript 中继续学习。虽然在完成第一个测试之后我已经遇到了一些问题，并且想知道在 Typescript 中编写的测试应该有什么不同。

应用程序.ts

function App() {
    return (
        <div className="container my-5">
            <form>
                <div className="mb-3">
                    <label htmlFor="email" className="form-label">
                        Email Address
                    </label>
                    <input
                        type="email"
                        id="email"
                        name="email"
                        className="form-control"
                    />
                </div>
                <div className="mb-3">
                    <label htmlFor="password" className="form-label">
                        Password
                    </label>
                    <input
                        type="password"
                        id="password"
                        name="password"
                        className="form-control"
                    />
                </div>
            </form>
        </div>
    );
}

export default App;

应用程序测试.tsx

import { render, screen } from "@testing-library/react";
import App from "./App";

test("inputs should be initially empty", () => {
    render(<App />);
    const emailInputElement = screen.getByRole("textbox");
    const passwordInputElement = screen.getByLabelText(/password/);
    expect(emailInputElement.value).toBe("");
    expect(passwordInputElement.value).toBe("");
});

我收到错误消息“属性‘值’在类型‘HTMLElement’上不存在”：

expect(emailInputElement.value).toBe("");
expect(passwordInputElement.value).toBe("");

这些是否需要在Typescript上进行不同的解释？

Answer 1

您收到此错误是因为screen.getByRole和screen.getByLabelText返回HTMLElement object 并且它没有value属性。

有两种方法可以让它工作：

1. 将返回类型显式定义为HTMLInputElement （它具有 value prop）。

import { render, screen } from "@testing-library/react";
import App from "./App";

test("inputs should be initially empty", () => {
  render(<App />);

   const emailInputElement = screen.getByRole<HTMLInputElement>("textbox");
   const passwordInputElement = screen.getByLabelText<HTMLInputElement>(/password/i);

   expect(emailInputElement.value).toBe("");
   expect(passwordInputElement.value).toBe("");
});

2. 使用@testing-library/jest-dom library -> 它提供了一组自定义笑话匹配器，您可以使用它们来扩展笑话。 您可以在此处查看更多信息。

import "@testing-library/jest-dom/extend-expect";
import { render, screen } from "@testing-library/react";
import App from "./App";

test("inputs should be initially empty", () => {
  render(<App />);

   const emailInputElement = screen.getByRole("textbox");
   const passwordInputElement = screen.getByLabelText(/password/i);  

   expect(emailInputElement).toHaveValue("");
   expect(passwordInputElement).toHaveValue("");
});

Answer 2

您可以将两个文本框的类型定义为HTMLInputElement也可以在实际代码中以密码为目标，它区分大小写，因此始终使用正则表达式来避免测试失败，即(/password/i)

  render(<App/>);
  const emailInputElement: HTMLInputElement = screen.getByRole("textbox");
  const passwordInputElement: HTMLInputElement =
    screen.getByLabelText(/password/i);
  expect(emailInputElement.value).toBe("");
  expect(passwordInputElement.value).toBe("");
});