React testing library - TypeError: expect(...).toHaveTextContent is not a function

Question

我正在按照一个简单的教程来学习 React 测试库。

我有一个简单的组件，例如：

import React, {useState} from 'react';

const TestElements = () => {
  const [counter, setCounter] = useState(0)

  return(
    <>
      <h1 data-testid="counter" >{ counter }</h1>
      <button data-testid="button-up" onClick={() => setCounter(counter + 1)}>Up</button>
      <button data-testid="button-down" onClick={() => setCounter(counter - 1)}>Down</button>
    </>
  )
}

export default TestElements

测试文件如：

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

afterEach(cleanup);

test('should equal to 0', () => {
    const { getByTestId } = render(<TestElements />)
    expect(getByTestId('counter')).toHaveTextContent(0)
});

但是如果我运行测试，我会收到以下错误：

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

我正在使用 create-react-app，package.json 显示：

"@testing-library/jest-dom": "^4.2.4",

我还需要加上笑话吗？

Answer 1

我认为您正在关注您在其他问题中提到的 this tutorial。

要解决您的问题，您需要通过在测试文件中导入 "@testing-library/jest-dom/extend-expect" 来添加来自 jest-dom 的自定义笑话匹配器。 React 测试库的 full example.

中也提到了它

import React from 'react';
import {render, cleanup} from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';

import TestElements from './TestElements';

afterEach(cleanup);
...

编辑：我刚刚阅读了您问题下的评论，@jonrsharpe 似乎已经提到您需要导入 extend-expect 但我将在此处留下这个答案。

React testing library - TypeError: expect(...).toHaveTextContent is not a function

React testing library - TypeError: expect(...).toHaveTextContent is not a function

javascript

reactjs

jestjs

react-testing-library