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

[tkyr-hh]

Describe the bug

As mentioned in the docs we can check the TextInput value with native matcher toHaveDisplayValue(value)

Expected behavior

The matcher is working fine.

Steps to Reproduce

• Create a component that has a TextInput.
• Add placeholder to it.
• Get this TextInput with this query getByPlaceholderText. const textInput = screen.getByPlaceholderText('mobile Number'))
• add this to your test: expect(textInput).toHaveDisplayValue(/^5[0-9]{8}$/);.

Versions

npmPackages:
  @testing-library/react-native: ^12.4.3 => 12.4.3
  react: 18.2.0 => 18.2.0
  react-native: 0.71.14 => 0.71.14
  react-test-renderer: 18.2.0 => 18.2.0**

[mdjastrzebski]

@tkyr-hh Did you added the required import to your jest-setup.ts file? https://callstack.github.io/react-native-testing-library/docs/jest-matchers#setup

[tkyr-hh]

@mdjastrzebski yes, I've add it inside under the jest key in package.json as setupFilesAfterEnv.

package.json

"jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?@react-native|react-native|@react-native/.*|@sentry/react-native|@react-navigation/.*|react-native-svg|@sentry/react-native|react-native-appsflyer|@react-native-community/.*|@react-native-community/geolocation)"
    ],
    "setupFilesAfterEnv": [
      "@testing-library/jest-native/extend-expect"
    ],
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ],
    "automock": false,
    "setupFiles": [
      "./node_modules/react-native-gesture-handler/jestSetup.js",
       "./setup-jest.js"
    ],
    "transform": {
      "^.+\\.js?$": "babel-jest"
    }
  }

setup-jest.js

/* eslint-env jest */

import {NativeModules} from 'react-native';
import 'react-native-gesture-handler/jestSetup';

NativeModules.ImagePickerManager = {
  showImagePicker: jest.fn(),
  launchCamera: jest.fn(),
  launchImageLibrary: jest.fn(),
};
...

[mdjastrzebski]

You should be importing "@testing-library/react-native/extend-expect", and not "@testing-library/jest-native/extend-expect".

You have this in your jest entry in package.json:

    "setupFilesAfterEnv": [
      "@testing-library/jest-native/extend-expect"
    ],

[tkyr-hh]

Oh! sorry, I ready did not noticed this difference while I am setting up the testing environment. @mdjastrzebski Thanks a lot for your help.

Closing this issue...