react-native-testing-library: Type error when upgrading from 11.5 to 11.5.1 with skipLibCheck: false and using RN 0.70

Describe the bug

While trying to upgrade to the RC (anyone could link me the thread where we were discussing the RC, I can’t find it anymore), I realised I missed some minors updates, and found breaking types between 11.5.0 and 11.5.1.

node_modules/@testing-library/react-native/build/within.d.ts:48:152 - error TS2307: Cannot find module 'react-native/types' or its corresponding type declarations.

48     getAllByRole: import("./queries/makeQueries").GetAllByQuery<import("./matches").TextMatch, import("./queries/options").CommonQueryOptions & import("react-native/types").AccessibilityState & {
                                                                                                                                                          ~~~~~~~~~~~~~~~~~~~~

...

18  node_modules/@testing-library/react-native/build/render.d.ts:51
18  node_modules/@testing-library/react-native/build/within.d.ts:32

All errors are regarding the way the import of AccessibilityState is done as part of our build output.

Steps to Reproduce

Simply create a repo with RN@0.70 and a version of RNTL>=11.5.1, make sure to have skipLibCheck: false in the compilerOptions of your tsconfig and run typescript.

Versions

  npmPackages:
    @testing-library/react-native: 12.0.0-rc.0 => 12.0.0-rc.0
    react: 18.1.0 => 18.1.0
    react-native: 0.70.6 => 0.70.6
    react-test-renderer: 18.1.0 => 18.1.0

About this issue

Original URL
State: closed
Created a year ago
Comments: 18 (11 by maintainers)

Most upvoted comments

I don’t think importing @types/react-native could fix the issue, if the type is then imported from this package it would not work for users who have a version of React Native >= 0.71 unless they keep this package which is not ideal. One solution would be to have versions that support only React Native >= 0.71 and others for older versions but it would be hard to maintain. Another solution is to declare those types in RNTL repo. It’s also not ideal but if those types rarely change then we could have a broader range of React Native versions as peer dependencies.

It’s also not a very important issue so both these solutions seem overkill. Surely someone else must have experienced this issue, I’ll ask on the React Native repo what is the recommended approach

pierrezimmermannbam on Mar 2, 2023

Released in stable branch as v11.5.3.

mdjastrzebski on Mar 7, 2023

Even without enabling skipLibCheck the resolved type of getByRole options is any since it uses AccessibilityState

pierrezimmermannbam on Mar 1, 2023

It seems that our import type { AccessibilityState } from ‘react-native’ gets transpilled by TSC/Babel into two slightly different outputs:

Yep that’s exactly the problem/difference.

it runs tests fine

I’ve reproduced the error by simply running tsc, not typescript, but you need to explicitly enable skipLibCheck: true, because our config extends expo’s one that by default disables that options.

AugustinLF on Mar 1, 2023