Question

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

getByText，getByTestId等，如果未找到元素，则在react-testing-library函数触发之前，测试会失败，并在expect中引发错误。

您如何使用react-testing-library来测试玩笑中不存在的东西？

Answer 1

来自DOM Testing-library Docs - Appearance and Disappearance

如果我要验证元素不存在怎么办？

通常，您将使用getByTestId实用程序访问呈现的元素。但是，如果找不到该元素，该函数将引发错误。如果要专门测试是否缺少元素，则应使用queryByTestId实用程序，如果找到该元素，它将返回该元素；否则，将返回null。
expect(queryByTestId('thing-that-does-not-exist')).toBeNull()

Answer 2

getBy *在找不到元素时会引发错误，因此您可以进行检查

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

Answer 3

使用queryBy / queryAllBy。

正如您所说，如果找不到任何内容，getBy*和getAllBy*会引发错误。

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

queryBy

queryBy*查询返回查询的第一个匹配节点，如果没有元素匹配，则返回null。这对于声明不存在的元素很有用。如果找到多个匹配项，则抛出该异常（改为使用queryAllBy）。

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

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

因此，对于您提到的特定两个，您将改用queryByText和queryByTestId，但它们适用于所有查询，而不仅仅是这两个查询。

Answer 4

您可以使用react-native-testing-library“ getAllByType”，然后检查该组件是否为null。具有不必设置TestID的优点，也应与第三方组件一起使用

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

Answer 5

另一种解决方案：您也可以使用 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 6

您必须使用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 7

[
  [0, 24, -5, 3, -3, -5], 
  [24, 0, -4, 8, 1, 1], 
  [-5, -4, 0, 13, 1, 2], 
  [3, 8, 13, 0, -2, 5], 
  [-3, 1, 1, 2, 0, 4],
  [-5, 1, 2, 5, 4, 0]
]

您如何使用Jest和react-testing-library测试元素的不存在？

7 个答案: