如何使用 jest 和 react-testing-library 测试元素是否存在？

Question

我有一个组件库，我正在为使用 Jest 和 react-testing-library 编写单元测试。 基于某些道具或事件，我想验证某些元素没有被渲染。

如果在expect触发之前未找到导致测试失败的元素，则getByText 、 getByTestId等会在react-testing-library中抛出错误。

你如何使用 react-testing-library 测试 jest 中不存在的东西？

Answer 1

来自DOM Testing-library Docs - Appearance and Disappearance

断言元素不存在

标准getBy方法在找不到元素时会抛出错误，因此如果您想断言某个元素不存在于 DOM 中，则可以改用queryBy API：

 const submitButton = screen.queryByText('submit') expect(submitButton).toBeNull() // it doesn't exist

queryAll APIs 版本返回匹配节点的数组。 数组的长度对于在 DOM 中添加或删除元素后的断言很有用。

 const submitButtons = screen.queryAllByText('submit') expect(submitButtons).toHaveLength(2) // expect 2 elements

not.toBeInTheDocument

jest-dom实用程序库提供了.toBeInTheDocument()匹配器，可用于断言某个元素是否在文档正文中。 这比断言查询结果为null更有意义。

 import '@testing-library/jest-dom/extend-expect' // use `queryBy` to avoid throwing an error with `getBy` const submitButton = screen.queryByText('submit') expect(submitButton).not.toBeInTheDocument()

Answer 2

使用queryBy / queryAllBy 。

如您所说，如果未找到任何内容， getBy*和getAllBy*抛出错误。

但是，等效方法queryBy*和queryAllBy*反而返回null或[] ：

查询方式

queryBy*查询返回查询的第一个匹配节点，如果没有元素匹配，则返回null 。 这对于断言不存在的元素很有用。 如果找到多个匹配项（使用 queryAllBy 代替），则会抛出此问题。

queryAllBy queryAllBy*查询返回查询的所有匹配节点的数组，如果没有元素匹配，则返回空数组 ( [] )。

https://testing-library.com/docs/dom-testing-library/api-queries#queryby

因此，对于您提到的特定两个，您应该使用queryByText和queryByTestId ，但这些适用于所有查询，而不仅仅是这两个。

Answer 3

您必须使用 queryByTestId 而不是 getByTestId。

这是一个代码示例，我想在其中测试具有“car” id 的组件是否不存在。

 describe('And there is no car', () => {
  it('Should not display car mark', () => {
    const props = {
      ...defaultProps,
      base: null,
    }
    const { queryByTestId } = render(
      <IntlProvider locale="fr" messages={fr}>
        <CarContainer{...props} />
      </IntlProvider>,
    );
    expect(queryByTestId(/car/)).toBeNull();
  });
});

Answer 4

getBy* 在找不到元素时抛出错误，因此您可以检查它

expect(() => getByText('your text')).toThrow('Unable to find an element');

Answer 5

希望这会有所帮助

此表显示了 function 错误的原因/时间

哪些函数是异步的

function 的退货单是什么

Answer 6

您可以使用 react-native-testing-library "getAllByType" 然后检查组件是否为空。 优点是不用设置TestID，也应该和第三方组件一起工作

 it('should contain Customer component', () => {
    const component = render(<Details/>);
    const customerComponent = component.getAllByType(Customer);
    expect(customerComponent).not.toBeNull();
  });

Answer 7

另一种解决方案：您也可以使用try/catch块

expect.assertions(1)
try {
    // if the element is found, the following expect will fail the test
    expect(getByTestId('your-test-id')).not.toBeVisible();
} catch (error) {
    // otherwise, the expect will throw, and the following expect will pass the test
    expect(true).toBeTruthy();
}

Answer 8

我最近写了一个方法来检查 cucumber 项目的元素可见性。

希望它有用。

public async checknotVisibility(page:Page,location:string) :Promise<void> 
{
    const element = await page.waitForSelector(location);
    expect(element).not.toBe(location); 
}

Answer 9

// check if modal can be open
const openModalBtn = await screen.findByTestId("open-modal-btn");
fireEvent.click(openModalBtn);

expect(
  await screen.findByTestId(`title-modal`)
).toBeInTheDocument();


// check if modal can be close
const closeModalBtn = await screen.findByTestId(
  "close-modal-btn"
);
fireEvent.click(closeModalBtn);

const sleep = (ms: number) => {
  return new Promise((resolve) => setTimeout(resolve, ms));
};

await sleep(500);
expect(screen.queryByTestId("title-modal")).toBeNull();

Answer 10

const submitButton = screen.queryByText('submit')
expect(submitButton).toBeNull() // it doesn't exist

expect(submitButton).not.toBeNull() // it exist

Answer 11

为我工作（如果你想使用 getByTestId）：

expect(() => getByTestId('time-label')).toThrow()

Answer 12

不想埋头，所以这是正确的解决方案✅

waitFor(() => queryByTestId(/car/) === null)

到目前为止，这里的所有答案都存在问题......

不要使用getByTestId ，那将不得不等待超时，因为它期望元素最终会在那里。 然后它会抛出，你必须抓住它，这是一个可读性较差的测试。 最后，您可能会遇到一个 RACE CONDITION，其中在元素消失之前评估 getByTestId 并且我们的测试将失败。

如果页面发生变化并且元素尚未消失，则仅使用不带queryByTestId的waitFor是一个问题。 比赛条件

deleteCarButton.click();
expect(queryByTestId(/car/)).toBeNull(); //

如果在单击处理程序和渲染完成之前对 expect() 进行求值，我们就会遇到麻烦。

Answer 13

queryByRole的默认行为是只查找一个元素。 如果不是，它会抛出一个错误。 所以如果你发现一个错误，这意味着当前查询找到 0 个元素

expect(
   ()=>screen.getByRole('button')
).toThrow()

getByRole返回 'null'，如果它没有找到 anthing

 expect(screen.queryByRole('button')).toEqual((null))

findByRole异步运行，因此它返回Promise 。 如果它没有找到元素，它会拒绝 promise。如果你正在使用它，你需要运行async回调

test("testing", async () => {
  let nonExist = false;
  try {
    await screen.findByRole("button");
  } catch (error) {
    nonExist = true;
  }
  expect(nonExist).toEqual(true);
});