在与之反应测试库嵌套组件的测试数据，testid最佳实践？

Question

我试图写一个测试，以检查是否我的应用程序正确渲染。在初始页面伊夫添加的“启动”一个数据testid。所以我的顶层测试检查，最初的组件已经呈现。

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()那么它错误说这是不是一个函数。

我的测试上面似乎工作。如果我从start改变getByTestId到别的那么它就是错误。但我不使用expect功能，所以我会违反最佳做法？

Answer 1

有两个部分，这个问题 -

为什么console.log(start)作品，为什么不start.debug()？

getByTestId返回一个HTMLElement。当您使用console.log(start)，HTML元素的细节将被记录。但一个HTMLElement没有debug功能。相反，反应测试库为您提供了debug功能，当您使用render渲染的成分。因此，而不是使用start.debug()，你应该使用wrapper.debug()。

因为你没有一个expect功能，它是一个很好的做法，写这样的测试？

我不知道什么可能是一个伟大的答案，但我会告诉我的使用方式。有用于获取使用数据testid元素两种变体 - getByTestId和queryByTestId。不同的是，getByTestId引发错误，如果与测试ID的元素未发现而queryByTestId返回在这种情况下空。这意味着，在getByTestId本身是元件的存在的断言。因此，有另一种期待它如果元素被发现或没有检查将在您使用getByTestId情况下多余的。我宁愿用queryByTestId如果我断言存在/不存在的元素。实施例下面 -

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

我会用getByTestId在这样的测试，我知道元素存在，且我们预计，元素的性质（而不是在元素的存在/不存在）。实施例下面 -

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

在上面的测试，如果getByTestId无法找到提交按钮，它抛出一个错误失败，并且不执行toHaveClass。在这里，我们并不需要测试存在/不存在的元素，因为这测试只关心按钮的“禁用”状态。