[英]React testing library in Typescript
I'm following a tutorial on React.js testing Library and trying to follow along in Typescript. Although after following along with the first test I'm already encountering a few issues and am wondering what should be different in a test written in Typescript.我正在关注关于 React.js 测试库的教程,并尝试在 Typescript 中继续学习。虽然在完成第一个测试之后我已经遇到了一些问题,并且想知道在 Typescript 中编写的测试应该有什么不同。
App.ts应用程序.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;
App.test.tsx应用程序测试.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("");
});
I'm receiving an error "Property 'value' does not exist on type 'HTMLElement" on:我收到错误消息“属性‘值’在类型‘HTMLElement’上不存在”:
expect(emailInputElement.value).toBe("");
expect(passwordInputElement.value).toBe("");
Do these need to be explained differently on Typescript?这些是否需要在Typescript上进行不同的解释?
You are getting this error because screen.getByRole
and screen.getByLabelText
returns HTMLElement
object and it doesn´t have value
prop.您收到此错误是因为
screen.getByRole
和screen.getByLabelText
返回HTMLElement
object 并且它没有value
属性。
There are 2 ways to get it working:有两种方法可以让它工作:
HTMLInputElement
(it has value prop).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("");
});
@testing-library/jest-dom
library -> it provides a set of custom jest matchers that you can use to extend jest.@testing-library/jest-dom
library -> 它提供了一组自定义笑话匹配器,您可以使用它们来扩展笑话。 You can check more here .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("");
});
You can define type for both text box as HTMLInputElement
also where you are targeting password in your actual code it's case sensitive so always use regular expression to avoid tests failing ie (/password/i)
您可以将两个文本框的类型定义为
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("");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.