[jest-expo] TypeError: expect(...).toHaveTextContent is not a function

[haoynmail]

Using jest-expo and @ testing library/react native for testing, encountered a TypeError: expect (...). toHaveTextContent is not a function error.

The environment is as follows:

package.json:

{
"name": "test example",
"version": "1.0.0",
"main": "index.ts",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"test": "jest --watchAll"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"expo": "~52.0.17",
"expo-status-bar": "~2.0.0",
"react": "18.3.1",
"react-native": "0.76.3"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react-native": "^12.9.0",
"@types/jest": "^29.5.14",
"@types/react": "~18.3.12",
"jest": "^29.7.0",
"jest-expo": "^52.0.2",
"typescript": "^5.3.3"
},
"private": true
}

jest-config.ts:

import type { Config } from 'jest';

const config: Config = {
preset: '@testing-library/react-native',
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
setupFilesAfterEnv: ['@/jest-setup.ts'],
};

export default config;

jest-setup.ts:

import * as matchers from '@testing-library/jest-dom/matchers';

expect.extend(matchers);

tsconfig.json:

{
"extends": "expo/tsconfig.base",
"compilerOptions": {
"strict": true,
"paths": {
"@/": [
"./"
]
},
"types": [
"@testing-library/jest-dom"
]
},
"include": [
"/*.ts",
"/.tsx",
".expo/types/**/.ts",
"expo-env.d.ts"
]
}

Test code:

import * as React from 'react'
import {Button, Text, TextInput, View} from 'react-native'
import {render, screen, fireEvent} from '@testing-library/react-native'

function Example() {
const [name, setUser] = React.useState('')
const [show, setShow] = React.useState(false)

return (


<Button
title="Print Username"
onPress={() => {
// let's pretend this is making a server request, so it's async
// (you'd want to mock this imaginary request in your unit tests)...
setTimeout(() => {
setShow(true)
}, Math.floor(Math.random() * 200))
}}
/>
{show && {name}}

)
}

test('examples of some things', async () => {
const expectedUsername = 'Ada Lovelace'

render()

fireEvent.changeText(screen.getByTestId('input'), expectedUsername)
fireEvent.press(screen.getByText('Print Username'))

// Using findBy query to wait for asynchronous operation to finish
const usernameOutput = await screen.findByTestId('printed-username')

// Using toHaveTextContent matcher from @testing-library/jest-native package.
expect(usernameOutput).toHaveTextContent(expectedUsername)

expect(screen.toJSON()).toMatchSnapshot()
})

[mdjastrzebski]

Hi @haoynmail, looks like you are using wrong Jest Matchers package.

In jest-setup.ts replace:

import * as matchers from '@testing-library/jest-dom/matchers';
expect.extend(matchers);

With:

import '@testing-library/react-native/extend-expect';

See the relevant doc page.

[haoynmail]

Thank you for your reply

At the beginning, I used @testing-library/react-native/extend-expect in jest-setup.ts, expect (...). toHaveTextContent is not a function occurred, then I changed it to @testing-library/test dom/extend-experiment. But the same error still occurred.