javascript - React 测试库 - TypeError : expect(. ..).toHaveTextContent 不是函数

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",

我还需要添加 Jest 吗？

Answer 1

我想你在关注 this freeCodeCamp tutorial你在另一个问题中提到。
要解决您的问题，您需要通过导入 "@testing-library/jest-dom/extend-expect" 添加来自 jest-dom 的自定义 Jest 匹配器。在您的测试文件中。 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但我会在这里留下这个答案。