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

Question

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

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

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

我认为您正在关注您在其他问题中提到的本教程。

要解决您的问题，您需要通过"@testing-library/jest-dom/extend-expect"在测试文件中导入来添加 jest-dom 中的自定义 jest 匹配器。React 测试库的完整示例中也提到了它。

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但我会在这里留下这个答案。

Answer 2

我建议有一个setupTests.js文件，其中包含：

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

如此处建议的：https ://create-react-app.dev/docs/running-tests#react-testing-library