代码之家 › 专栏 › 技术社区 › Evanss

在带有React测试库的嵌套组件中测试数据testid的最佳实践?

react-testing-library

0

Evanss · 技术社区 · 7 年前

import React from "react";
import { render } from "react-testing-library";
import App from "../App";

test("App - Check the choose form is rendered", () => {
  const wrapper = render(<App />);
  const start = wrapper.getByTestId("start");
  // console.log(start)
  // start.debug();
});

如果我 console.log(start) 我可以看到节点的所有属性。但是如果我试着 debug()

我的上述测试似乎确实有效。如果我把getByTestId从 start 对于其他任何事情,它都会出错。但我不使用 expect

1 回复 | 直到 7 年前

1

3

Manish 7 年前

这个问题有两个部分-

为什么? console.log(start) 工作,为什么不 start.debug()

getByTestId console.log(开始) ,则会记录HTMLElement详细信息。但是HTMLElement没有 debug 使用时的功能 render 渲染组件。所以不用 ,您应该使用 wrapper.debug()

因为你没有 expect

我不确定什么是一个很好的答案,但我会告诉我如何使用它。使用datatestid获取元素有两种变体- queryByTestId . 不同的是 getByTestId 如果找不到具有测试id的元素,则引发错误 查询字节ID 在这种情况下返回null。这意味着 getByTestId 它本身就是元素存在的断言。因此,如果您正在使用另一个expect来检查元素是否被找到,这将是多余的 . 我宁愿用 查询字节ID 如果我要断言元素的存在/不存在。下面的例子-

test("App - Check the "Submit" button is rendered", () => {
 const { queryByTestId } = render(<App />)
 expect(queryByTestId('submit')).toBeTruthy()
});

我会用在这样的测试中,我知道元素存在,并且我们期望元素的属性(而不是元素的存在/不存在)。下面的例子-

test("App - Check the "Submit" button is disabled by default", () => {
 const { getByTestId } = render(<App />)
 expect(getByTestId('submit')).toHaveClass('disabled')
});

找不到submit按钮,它会抛出错误而失败,并且不会执行 toHaveClass . 这里我们不需要测试元素是否存在,因为这个测试只涉及按钮的“禁用”状态。