jest-native: Property 'toBeOnTheScreen' does not exist on type 'JestMatchers' (TS project)

@mdjastrzebski

If affects all matchers extended by jest-native, none of them show up in the intellisense / are underlined taht the property doesn’t exist. Same for toBeEnabled, toBeDisabled etc.

Although, this seemed to help in my tsconfig.json

  "compilerOptions": {
    "types": ["@testing-library/jest-native", "jest"]
  },

@Aure77 I had the same problem, in my setup I had .jest/setup.ts which meant that the include option in tsconfig.json wasn’t including this file (since it was src/**/*). Maybe you have a similar issue.

I had same issue. All my config files were ok.

I fixed it importing: import '@testing-library/jest-native/'; on every test.

Example:

import React from 'react';
import { render, screen } from '@testing-library/react-native';
import '@testing-library/jest-native/'; // HERE!!
import MyComponent from '../MyComponent';


it('should render with the correct props', () => {
  const onPress = jest.fn();

  render(
    <TestWrapper>
      <MyComponent text="Click Here" variant="filled" onPress={onPress} />
    </TestWrapper>
  );

  const btnText = screen.getByText('Click Here');
  
  expect(btnText).toBeOnTheScreen();

});

@mdjastrzebski Yes, that change in tsconfig.json was the missing part, thank you. So to summarise I have:

• jest-setup.ts file with:

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

• and in tsconfig.json

 "include": [
    ...
    "./jest-setup.ts"
  ],

I used a triple slash directive to get the correct types added:

/// <reference types="@testing-library/jest-native/extend-expect" />

This was in a .d.ts file that the ts compiler had visibility of (e.g. src/types/jest.d.ts)

I experience the same. It only goes away if like @emflomed17 mentions, you import it on the test or extend expect inline in the test file.

The only other thing to mention is I’m in a yarn workspace within a monorepo? Not sure that matters though. The error clearly goes away when you bring in the import line to the test file specifically. The tests all pass whether or not TS has an error about the matcher

package.json config

  "jest": {
    "preset": "@testing-library/react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json"
    ],
    "setupFilesAfterEnv": [
      "./jest-setup.js"
    ],
    "setupFiles": [
      "../../node_modules/react-native-gesture-handler/jestSetup.js"
    ],
    "transformIgnorePatterns": [
      "../../node_modules/(?!(jest-)?@?react-native|@react-native-community|@react-navigation)"
    ],
    "collectCoverage": true,
    "coverageThreshold": {
      "global": {
        "branches": 7,
        "functions": 15,
        "lines": 20,
        "statements": 20
      }
    }
  }

jest-setup.js config

import { configure } from '@testing-library/react-native'

// Import Jest Native matchers
import '@testing-library/jest-native/extend-expect'

// Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper')

// Mock Async storage
import mockAsyncStorage from '@react-native-async-storage/async-storage/jest/async-storage-mock'
jest.mock('@react-native-async-storage/async-storage', () => mockAsyncStorage)

// Mock Safe Area insets
jest.mock('react-native-safe-area-context', () => {
  const inset = { top: 0, right: 0, bottom: 0, left: 0 }
  return {
    ...jest.requireActual('react-native-safe-area-context'),
    SafeAreaProvider: jest.fn(({ children }) => children),
    SafeAreaConsumer: jest.fn(({ children }) => children(inset)),
    useSafeAreaInsets: jest.fn(() => inset),
    useSafeAreaFrame: jest.fn(() => ({ x: 0, y: 0, width: 390, height: 844 })),
  }
})

// Mock Reanimated
jest.mock('react-native-reanimated', () => {
  const Reanimated = require('react-native-reanimated/mock')

  // The mock for `call` immediately calls the callback which is incorrect
  // So we override it with a no-op
  Reanimated.default.call = () => {}

  return Reanimated
})

// Enable excluding hidden elements from the queries by default
configure({
  defaultIncludeHiddenElements: false,
})

Talking about VS Code intellisense, I’ve tried every workaround and only following solutions worked

• adding following totsconfig.json

"compilerOptions": {
    "types": ["@testing-library/jest-native", "jest"]
  },

• adding import '@testing-library/jest-native/extend-expect'; to every .test file

not sure why the declarations.d.ts solution is not working - is there anything additional I have to do? If I declare some random module there and try to import it, then the VS Code intellisense finds that module, so the file is loaded properly.

Using latest "@testing-library/jest-native": "^5.4.2", with "typescript": "^5.0.4"

@emflomed17 did you follow the installation instructions at https://github.com/testing-library/jest-native#usage ?

In correct setting adding import '@testing-library/jest-native/extend-expect'; to your jest-setup.js (make sure it’s setupFilesAfterEnv ) file should be enough to make matchers work correctly.

Hey, you have forgot to install testing-library/jest-native Install it and then check it will work.

Thanks,