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

Question

I'm following a simple tutorial to learn react testing library.

I have a simple component like:

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

And a test file like:

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)
});

But if I run the test, I'm getting the following error:

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

I'm using create-react-app and the package.json shows:

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

Do I need to add jest as well?

Gender

Have you imported Jest DOM's extend-expect anywhere? See testing-library.com/docs/ecosystem-jest-dom – Godsend

"@testing-library/jest-dom": "^4.2.4", is included when you use create-react-app – Gender

The dependency is included, and should be loaded in src/setupTests.js (assuming you're using the default template). But what changes have you made, is this reproducible in a brand new CRA app? What's the tutorial? – Godsend

Its this tutorial so I didn't create the create-react-app but clones the app from the tutorial - freecodecamp.org/news/… – Gender

As a simple check, does adding the right import to your test code fix it? It works fine in the example I put together with CRA4 in my own tutorial (blog.jonrshar.pe/2020/Nov/22/js-tdd-e2e.html), but the repo lacks the setupTests file. – Godsend

what do you mean right import ? – Gender

See my first comment. – Godsend

yes I tried that but doesn't work – Gender

OK so Ive created my own app with create-react-app and it works haha so much for the tutorial – Gender

I vaguely recall you might have had to import @testing-library/jest-dom/extend-expect at one point, maybe that tutorial uses an older version where that would work. Or you're welcome to give mine a go! – Godsend

See react-testing-library issue 379 – Papyrology

Answer 1

I think you're following this freeCodeCamp tutorial you mentioned in your other question.

To solve your issue, you need to add the custom jest matchers from jest-dom by importing "@testing-library/jest-dom/extend-expect" in your test file. It is also mentioned in React Testing Library's 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);
...

Edit: I've just read the comments under your question and it seems @jonrsharpe has already mentioned that you need to import extend-expect but I'll leave this answer here.

Sharynshashlik

I was stuck, but in the case of a mono repo where I knew I wrote tests using toHaveFocus in another area I couldn't get why the same assertions weren't available in another lib. From this answer I finally figured out I had to add a per-lib jest-setup.ts (or .js) with import '@testing-library/jest-dom'; and import '@testing-library/jest-dom/extend-expect';. And that fixed my nx lib testing issue. – Masinissa

^ and then I had to add to jest-config.ts: setupFilesAfterEnv: ['<rootDir>/jest-setup.ts'], – Masinissa

Answer 2

I'd recommend having a setupTests.js file that contains:

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

as suggested here: https://create-react-app.dev/docs/running-tests#react-testing-library

Tiffanitiffanie