Reactjs 如何测试元素是否存在？

我想检查我的组件中是否存在一个按钮

import React，{useState}来自“React”；
常量文本=（{Text}）=>{
const[state，setState]=useState（0）；
常量添加=（）=>{
设置状态（状态+1）
};
返回(
你好，世界
你好{text}
计数{state}
增加
);
};
导出默认文本您犯了一个错误；toBeTruthy（）不是按钮中的函数，而是expect方法中的函数

  test('check counter', ()=> {
    const { getByText } = render(<Text />);
    const button = getByText("Increase");
    expect(button).toBeTruthy()
});

test（'check counter'，（）=>{
const{getByText}=render（）；
const按钮=getByText（“增加”）；
expect（按钮）.toBeTruthy（）
});
我建议更好的测试方法是使用元素的“datatestid”属性

<div>
            <h1>Hello World</h1>
            <h2>Hello {text}</h2>
            <h2>Count {state}</h2>
            <button role="button" data-testid="required-button" onClick={add}>Increase</button>
</div>

test('check counter', ()=> {
    const { getByTestId } = render(<Text />);
    const button = getByTestId("required-button");
    expect(button).toBeInTheDocument();
});


你好，世界
你好{text}
计数{state}
增加
测试（'检查计数器'，（）=>{
const{getByTestId}=render（）；
const button=getByTestId（“必需按钮”）；
expect（button.toBeInTheDocument（）；
});

我这样做的原因是getByText对于页面中任何单词的增加都是正确的
关于如何稍微改进这一点的简短说明。实用程序库提供了
.toBeInTheDocument（）
匹配器，可用于断言元素是否在文档体中，而不是使用
toBeTruthy（）
jest dom
匹配器。在这种情况下，这可能比坚持真实更有意义

此外，最好通过角色而不是文本来获取按钮，因为这是一种更好的方式

test（'check counter'，（）=>{
const{getByRole}=render（）；
const button=getByRole（'button'）；
expect（按钮）.toBeInTheDocument（）
});
你能看一看吗getByTestId应该尽量少用谢谢@Hyle这本书读得很好，我不知道，但是如果他们能提到背后的原因那就太好了guidelines@Hylle它在页面的第一行说，“您的测试应该类似于用户如何与您的代码交互”。用户使用文本导航和查找要与之交互的元素，而不是testId属性。是的，这是有意义的，但您不觉得使用测试Id是一种更基本的方法，同时可以获得相同的结果吗
  test('check counter', ()=> {
    const { getByRole } = render(<Text />);
    const button = getByRole('button');
    expect(button).toBeInTheDocument()
});