Expect 不是 React 测试库中的函数

Question

我正在从 freecodecamp 博客学习 React 单元测试。我按照其中提到的所有步骤在 React 应用程序中测试 DOM 元素，但测试失败并显示以下消息：

\n

PASS  src/App.test.js\n FAIL  src/components/TestElements.test.js\n  Testing of DOM Element \xe2\x80\xba should equal to 0\n\n    TypeError: expect(...).toHaveTextContent is not a function\n\n       8 |     it('should equal to 0', () => {\n       9 |         const { getByTestId } = render(<TestElements />);\n    > 10 |         expect(getByTestId('counter')).toHaveTextContent(0)\n         |                                        ^\n      11 |        });\n      12 |\n      13 |     it('should test button disbaled status',()=>{\n\n      at Object.<anonymous> (src/components/TestElements.test.js:10:40)\n

\n

她的是我的 TestElement.js

\n

import React from 'react'\n\nconst TestElements = () => {\n const [counter, setCounter] = React.useState(0)\n  \n return (\n  <>\n    <h1 data-testid="counter">{ counter }</h1>\n    <button data-testid="button-up" onClick={() => setCounter(counter + 1)}> Up</button>\n    <button disabled data-testid="button-down" onClick={() => setCounter(counter - 1)}>Down</button>\n </>\n    )\n  }\n  \n  export default TestElements\n

\n

这是我的 TestElements.test.js

\n

import React from 'react'\nimport {render,cleanup} from '@testing-library/react'\nimport TestElements from './TestElements'\n\ndescribe('Testing of DOM Element', ()=>{\n    \n    afterEach(cleanup)\n    it('should equal to 0', () => {\n        const { getByTestId } = render(<TestElements />); \n        expect(getByTestId('counter')).toHaveTextContent(0)\n       });\n\n    it('should test button disbaled status',()=>{\n        const {getByTestId} = render(<TestElements/>)\n        expect(getByTestId('button-down')).toBeDisabled()\n\n    })\n    it('should test button is not disabled status', ()=>{\n        const {getByTestId} = render(<TestElements/>)\n        expect(getByTestId('button-up')).not.toHaveAttribute('disabled')\n        \n    })\n})\n

\n

Answer 1

您需要extend-expect从@testing-library/jest-dom测试文件中导入，如下所示：

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

或者，如果您不想在每个测试文件中导入以上行，则需要将jest config以下内容添加到项目中：

jest.config.js在您的项目中创建一个文件root，然后将以下代码放入其中：

//<====This is jest.config.js====>
module.exports = {
  setupFilesAfterEnv: ["<rootDir>/setupTests.js"]
}

然后在项目的setupTests.js开头创建一个root并将以下代码放入其中：

//<===== this is setupTests.js =====>
import "@testing-library/jest-dom/extend-expect";