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

react-testing-library version: 8.0.1
react version: 16.8.6
node version: 10.15.2
npm (or yarn) version: 6.4.1

Relevant code or config:

Component

import React, { useState, useEffect } from 'react';

const ClickCounter = (props) => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button data-testid="click-counter-button" onClick={() => setCount(count => count + 1)}>
        Click Me
      </button>
    </div>
  )
}

export default ClickCounter;

Test

test('component updates count when clicked', () => {
  const { getByText, getByTestId, asFragment } = render(
    <ClickCounter />
  );
  fireEvent.click(getByText('Click Me'));
  // const countTextNode = getByText(/You click.*\d.*times/i);
  const countTextNode = getByTestId('click-counter-button');
  expect(countTextNode).toHaveTextContent('You clicked 1 times');
});

What you did:

Just following the react-testing-library example to write a test for the React Hooks example.

What happened:

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

Reproduction:

https://github.com/atav32/react-testing-toHaveTextContent-bug

Just run npm test

Problem description:

I expected the test to pass, since it’s in the Readme example.

Did something change in jest-dom and the example needs to be updated? I took a peek at that library and the toHaveTextContent() is still part of the API.

This is probably just me not understanding the jest-dom API or a dependencies issue.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 14
Comments: 18 (5 by maintainers)

Commits related to this issue

refactor(tab): remove tabIndex set and unset for jsdom (#379) — committed to lucbpz/react-testing-library by juanca 4 years ago
add App.test.tsx test with react testing library - enhance jest.config.js 1. add moduleDirectories: ['node_modules', 'src'], so jest can find modules in src folder instead of writing test like this... — committed to bobbyquennell/peggy by bobbyquennell 3 years ago

Most upvoted comments

For me this fixed:

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

+196

cooervo on Jan 31, 2020

Ok nvm, I missed this line

// this adds custom jest matchers from jest-dom
import 'jest-dom/extend-expect'

My preference would be to keep the example as barebones as possible in order to highlight how to use react-testing-library. Throwing in a function from jest-dom was a red herring.

I never expect examples to have additional dependencies that I have to manually install, unless they’re explicitly stated in big bold instructions. I thought jest-dom was automatically included in react-testing-library, just like jsdom is included in jest.

My suggestion would be to remove the jest-dom dependency from the example and change the line

expect(getByTestId('greeting-text')).toHaveTextContent('hello there')

expect(getByTestId('greeting-text').textContent).toBe('hello there')

If the authors/maintainers agree, then I can make a PR.

+108

atav32 on Jun 1, 2019

Create that setupTest.js file and put this in it:

// src/setupTest.js
import '@testing-library/jest-dom/extend-expect'

That’ll do it 😃

You might also appreciate https://github.com/kentcdodds/bookshelf as an example of a create-react-app based app that does this.

+16

kentcdodds on Apr 22, 2020

Agreed, I think we should just add a comment explaining where the assertion is coming from

kentcdodds on Jun 1, 2019

In my project I wasn’t using any transformers so import didn’t work in my jest-setup.js, but this did:

require('@testing-library/jest-dom');

pesterhazy on Oct 9, 2021

```js
import '@testing-library/jest-dom/extend-expect'

Oh! I had understood to do this:

module.exports = {
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
};

so close, but no cigar. THanks Kent!

lucksp on Apr 22, 2020

what is the trick with a create-react-app & react-testing to have setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'], implemented correctly?

If I try to put setupFilesAfterEnv inside the jest object of package.json, it tells me to create a setupTests.js file…so I do that. Then when I try to use an expected assertion such as toBeChecked or toHaveAttribute it says they are not functions.

Without create-react-app if I have a jest.config file the setup is easier IMO. Please advise. thanks!

lucksp on Apr 22, 2020

Workable solution: setupTests.js import "@testing-library/jest-dom/extend-expect";

stephyswe on Apr 28, 2020

I’ve updated the README to be more descriptive.

kentcdodds on Jul 12, 2019

I’m not sure I agree with your suggestion. That is an example of the usage of react testing library with jest, hence the addition of the jest-dom helpers. react testing library also does not depend on jest, it can be used with other test runners and assertion libraries. That’s why jest-dom is not included by default. But if the example already uses jest, why not use also jest-dom? As you said the instruction to import the dependency was right there.

If you remove it, you’d also have to avoid using the toHaveAttribute('disabled') in the line next to the one that failed with toHaveTextContent.

gnapse on Jun 1, 2019