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

getByTextgetByTestId等在react-testing-library抛出和错误,如果没有找到元素导致测试在expect函数触发之前失败。

你如何使用 react-testing-library 测试玩笑中不存在的东西?

#1楼 票数:315 已采纳

来自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()

#2楼 票数:39

使用queryBy / queryAllBy

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

但是,等效方法queryBy*queryAllBy*反而返回null[]

查询方式

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

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

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

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

#3楼 票数:17

您必须使用 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();
  });
});

#4楼 票数:15

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

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

#5楼 票数:2

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

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

#6楼 票数:1

另一种解决方案:您也可以使用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();
}

#7楼 票数:0

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

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

  ask by SomethingOn translate from so

未解决问题?本站智能推荐:

3回复

如何使用 jest 和 react-testing-library 测试 react-toastify

我有一个带有某种形式的屏幕,在提交时,我使用 axios 将请求发送到后端。 成功收到响应后,我用 react-toastify 敬酒。 非常直接的屏幕。 但是,当我尝试使用 jest 和 react 测试库通过集成测试来测试这种行为时,我似乎无法让 Toast 出现在 DOM 上。 我有一个像这
2回复

使用 jest 和 react-testing-library 的测试方法

我无法得到答案,如何无法在使用 jest 和 react-testing-library 进行反应的功能组件中访问该方法。 我尝试过使用酶,但我发现一切都在改变为 RTL。
1回复

如何使用 Jest 和 React-Testing-Library 模拟和测试 scrollBy?

给定以下组件: import * as React from "react"; import "./styles.css"; export default function App() { const scrollContainerRef = React.useRef<HTMLDivEl
1回复

如何使用 react-testing-library 和 Jest 按值查询 textarea 元素?

我正在开发一个文本编辑 web 应用程序,并使用 react-testing-library 和 jest 进行测试。 该应用程序具有动态数量的 textarea,为了测试行为,我想使用它的已知值获取对 textarea 的引用,但是,我无法使用 RTL 的查询使其工作。 我尝试了getByTex
1回复

使用 jest 和 react-testing-library 测试连接的组件

我想测试连接的 React 组件。 我正在使用 Jest、React 测试库和 redux-mock-store。 当我尝试获取某些元素时,出现错误: TestingLibraryElementError:无法找到带有文本的元素:Test。 这可能是因为文本被多个元素分解了。 在这种情况下,您可
2回复

如何使用 Jest 和 react-testing-library 测试 react-dropzone?

我想从 React 组件中的 react-dropzone 库测试 onDrop 方法。 我正在使用 Jest,React 测试库。 我正在创建模拟文件,并试图将这些文件放入输入中,但在 console.log 中文件仍然等于一个空数组。 你有什么想法? 包.json 模态导入文件.tsx
1回复

如何使用 Jest 和 react-testing-library 测试 useRef?

我正在使用 create-react-app、Jest 和 react-testing-library 来配置聊天机器人项目。 我有一个使用 useRef 钩子的功能组件。 当一条新消息到来时,会触发 useEffect 钩子并通过查看 ref 的当前属性引起滚动事件。 const ChatBot
1回复

编写测试以使用 jest 和 react-testing-library 检查本地 setState 调用

我目前正在使用 react-testing-library 并且似乎无法弄清楚如何测试组件的 setState 。 在以下示例中,我尝试根据 API 中的数据测试加载的项目数是否正确。 稍后将扩展它以测试诸如项目之间的交互之类的事情。 成分: 测试: 我知道这与玩笑模拟函数有关,但不明白