时间戳

首页 > 解决方案 > Expect 不是反应测试库中的函数

reactjs - Expect 不是反应测试库中的函数

问题描述

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

PASS  src/App.test.js
 FAIL  src/components/TestElements.test.js
  Testing of DOM Element › should equal to 0

    TypeError: expect(...).toHaveTextContent is not a function

       8 |     it('should equal to 0', () => {
       9 |         const { getByTestId } = render(<TestElements />);
    > 10 |         expect(getByTestId('counter')).toHaveTextContent(0)
         |                                        ^
      11 |        });
      12 |
      13 |     it('should test button disbaled status',()=>{

      at Object.<anonymous> (src/components/TestElements.test.js:10:40)

她的是我的 TestElement.js

import React from 'react'

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

这是我的 TestElements.test.js

import React from 'react'
import {render,cleanup} from '@testing-library/react'
import TestElements from './TestElements'

describe('Testing of DOM Element', ()=>{
    
    afterEach(cleanup)
    it('should equal to 0', () => {
        const { getByTestId } = render(<TestElements />); 
        expect(getByTestId('counter')).toHaveTextContent(0)
       });

    it('should test button disbaled status',()=>{
        const {getByTestId} = render(<TestElements/>)
        expect(getByTestId('button-down')).toBeDisabled()

    })
    it('should test button is not disabled status', ()=>{
        const {getByTestId} = render(<TestElements/>)
        expect(getByTestId('button-up')).not.toHaveAttribute('disabled')
        
    })
})

标签： reactjsjestjs

解决方案

您需要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";

推荐阅读