Response-test-library 为什么 toBeInTheDocument()不是一个函数

下面是我的工具提示代码，它在 MouseOver 和 MouseOutdisplay: none上切换 CSS 属性 display: block。

 it('should show and hide the message using onMouseOver and onMouseOut events respectively', () => {
const { queryByTestId, queryByText } = render(
<Tooltip id="test" message="test" />,
)
fireEvent.mouseOver(queryByTestId('tooltip'))
expect(queryByText('test')).toBeInTheDocument()
fireEvent.mouseOut(queryByTestId('tooltip'))
expect(queryByText('test')).not.toBeInTheDocument()
cleanup()
})

我一直得到这样的错误 TypeError: Expt (...) . toBeInTheDocument 不是一个函数

有人知道为什么会这样吗？我用来呈现和快照组件的其他测试都按预期工作。QueryByText 和 queryByTestId 也是如此。

129917 次浏览
小开
最佳答案

toBeInTheDocument不是 RTL 的一部分。您需要安装 开玩笑的来启用它。

然后通过以下方法将其导入到测试文件中: import '@testing-library/jest-dom'

小开

正如 Giorgio 所提到的，你需要安装 Jest-dom:

(我用的是打字稿)

npm i --save-dev @testing-library/jest-dom

然后向 setupTests.ts 添加一个导入

import '@testing-library/jest-dom/extend-expect';

然后在你的 Jest.config.js中你可以通过:

"setupFilesAfterEnv": [
"<rootDir>/src/setupTests.ts"
]
小开

而不是做:

    expect(queryByText('test')).toBeInTheDocument()

您可以通过使用

    let element = getByText('test');

如果没有在 getBy 调用中找到元素，测试将失败。

小开

执行 npm i @testing-library/react时，请确保有一个 setupTests.js 文件，其中包含以下语句

import '@testing-library/jest-dom/extend-expect';
小开

一些被接受的答案基本上是正确的，但有些可能有点过时: 一些现在还不错的参考资料:

以下是你需要的全部东西:

  1. 在项目的 <rootDir>(也就是 package.json和 jest.config.js所在的位置)中，确保有一个名为 jest.config.js的文件，这样 Jest 就可以自动获取它进行配置。该文件在 JS 中，但其结构类似于 package.json。
  2. 请确保输入以下内容:
  module.exports = {
testPathIgnorePatterns: ['<rootDir>/node_modules', '<rootDir>/dist'], // might want?
moduleNameMapper: {
'@components(.*)': '<rootDir>/src/components$1' // might want?
},
moduleDirectories: ['<rootDir>/node_modules', '<rootDir>/src'],
setupFilesAfterEnv: ['<rootDir>/src/jest-setup.ts'] // this is the KEY
// note it should be in the top level of the exported object.
};

  1. 另外，请注意，如果您正在使用类型脚本，您将需要确保您的 jest-setup.ts文件已编译(因此将其添加到 src或您的 tsconfig.json中要编译的项目列表中)。

  2. 在 jest-setup.ts/js(或任何您想要命名的入口点)文件的顶部: 添加 import '@testing-library/jest-dom';。

  3. 您可能还想确保它实际上运行，因此放置一个 console.log('hello, world!');。您还有机会添加任何希望在玩笑中可用的全局函数，比如(global.fetch = jest.fn())。

  4. 现在您实际上必须在控制台中安装 @testing-library/jest-dom: npm i -D @testing-library/jest-dom。

有了这些步骤，你就可以开玩笑了:

没有 TS: 你仍然需要:

  1. npm i -D @testing-library/jest-dom
  2. 创建一个 jest.config.js并向其添加最小值: module.exports = { setupFilesAfterEnv: ['<rootDir>/[path-to-file]/jest-setup.js'] }。
  3. 创建一个 [path-to-file]/jest-setup.js并向其中添加: import '@testing-library/jest-dom';。

Jest-setup 文件也是配置测试的好地方，比如创建一个特殊的 renderWithProvider(函数或设置全局窗口函数。

小开

在尝试了这篇文章中的所有建议之后，它仍然不适合我，我想提供一个替代的解决方案:

安装笑话:

npm i --save-dev @testing-library/jest-dom

然后在 Src 目录中创建一个 setupTests.js文件(这一点很重要!)！我把它放在根目录中，这个做 没有工作...)。在这里，写上:

import '@testing-library/jest-dom'

(或者 require(...)，如果你喜欢的话)。

这对我有用:)

小开

我很难解决这个问题，所以我相信如果你正在使用 CREATE REACT 应用程序，注意以下几点是很重要的:

  1. 你不需要一个 jest.config.js文件来解决这个问题，所以如果你有，你可以删除它。
  2. 您不需要在 package.json中更改任何内容。
  3. 您必须将您的 jest 安装文件命名为 setupTests.js，并将其放在 src文件夹下。如果您的安装文件名为 jest.setup.js或 jest-setup.js，它将无法工作。
小开

  1. 安装所需的软件包

    npm install --save-dev @testing-library/jest-dom eslint-plugin-jest-dom

  2. 在项目的根文件夹中创建 jest-setup.js并添加

    import '@testing-library/jest-dom'

  3. 在 jest.config.js

    setupFilesAfterEnv: ['<rootDir>/jest-setup.js']

  4. 仅在 TypeScript中，将以下内容添加到 tsconfig.json文件中。

    "include": ["./jest-setup.ts"]

toBeInTheDocument()和许多类似的功能不是 React-testing-library的一部分。它需要安装一个额外的软件包。

小开

没有一个答案对我有用，因为我犯了一个愚蠢的错误: 输入 toBeInDocument()而不是 toBeInTheDocument()。也许其他人也犯了同样的错误:)

小开

对于那些试图用 jest 运行类型脚本测试的人来说，即使安装了 @testing-library/jest-dom并遵循所有其他的答案，仍然会得到相同的错误: 你可能需要安装 jest-dom(给你)的类型定义:

npm i @types/testing-library__jest-dom

或者

yarn add @types/testing-library__jest-dom

您需要将它们作为真正的依赖项安装，而不是作为 devDependency安装。

小开

我有这个问题，但为 @testing-library/jasmine-dom而不是 @testing-library/jest-dom。

设置的过程只是有一点点不同与茉莉花。您需要在 before函数中设置环境，以便添加匹配器。我认为当你第一次 import的时候，开玩笑的人会继续增加对手，但是茉莉没有。

import { render, screen } from '@testing-library/react';
import MyComponent from './myComponent';
import JasmineDOM from '@testing-library/jasmine-dom';


describe("My Suite", function () {


beforeAll(() => {
jasmine.getEnv().addMatchers(JasmineDOM);
})




it('render my stuff', () => {
const { getByText } = render(<MyComponent />);
const ele = screen.getByText(/something/i);
expect(ele).toBeInTheDocument();
});
});
小开

如果你使用 TS 您还可以将 test.d.ts 文件添加到您的测试目录，并使用三斜杠指令: ///<reference types='@testing-library/jest-dom'>


提交答案