Typescript fails in `extend-expect.d.ts`

[erheron]

Describe the bug

We use Typescript in our project. We do not have skipLibCheck enabled.
After installation of RNTL v 12.4.0 and following RNTL Docs on installation it turns out that Typescript fails in RNTL's node_modules/@testing-library/react-native/src/matchers/extend-expect.d.ts file.

Expected behavior

Typescript does not fail

Steps to Reproduce

Here's a reproduction repo: https://github.com/erheron/rntl-1534-repro

Screenshots

Versions

npmPackages:
    @testing-library/react-native: ^12.4.0 => 12.4.0
    react: 18.2.0 => 18.2.0
    react-native: ^0.72.7 => 0.72.7
    react-test-renderer: 18.2.0 => 18.2.0

[erheron]

Weirdly enough, Typescript error is reproducible in our original project, but not in the smaller repro I shared. I'll take another look soon and maybe try to update the repro. But TSC error on toHaveStyle is concerning too 🤔

[mdjastrzebski]

@erheron try having separate jest-setup.ts file as in our example.

If you want to import it in jest.config.js then perhaps declarations.d.ts will help:
https://github.com/testing-library/jest-native#typescript-support

[erheron]

@erheron try having separate jest-setup.ts file as in our example.

Tried that too, and that didn't help (you're also welcome to fork my reproduction repo and play there!).
That is actually expected -- what is provided above is a compile-time error, and Typescript does not care about jest-setup.ts. Only Jest cares about it, in runtime 🤷🏻

Oops, maybe I'm wrong. But that didn't work either way 🤔

[erheron]

Yeah, clone the repro repo, check out this commit and run yarn tsc. What you should see is exactly this:

node_modules/@testing-library/react-native/src/matchers/extend-expect.d.ts:3:50 - error TS2307: Cannot find module '../matches' or its corresponding type declarations.

3 import type { TextMatch, TextMatchOptions } from '../matches';
                                                   ~~~~~~~~~~~~

node_modules/@testing-library/react-native/src/matchers/extend-expect.d.ts:4:48 - error TS2307: Cannot find module '../helpers/matchers/match-accessibility-value' or its corresponding type declarations.

4 import type { AccessibilityValueMatcher } from '../helpers/matchers/match-accessibility-value';
                                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@testing-library/react-native/src/matchers/extend-expect.d.ts:5:28 - error TS2307: Cannot find module './to-have-style' or its corresponding type declarations.

5 import type { Style } from './to-have-style';
                             ~~~~~~~~~~~~~~~~~


Found 3 errors in the same file, starting at: node_modules/@testing-library/react-native/src/matchers/extend-expect.d.ts:3

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[mdjastrzebski]

@erheron I've played a bit with the repro repo and skipLibCheck: true makes it pass.

However, it seems that with that option it only partially verifies the types, replacing e.g. Styles type with any so we would want to fix it also for skipLibCheck: true users (e.g. Expo does it by default).

[erheron]

@mdjastrzebski thanks for a very fast response, and the fix 🙇🏻

My two cents here:

1. I noticed that in chore: fix extend-expect.d.ts types by internalizing them #1536 you forgot to import ViewStyle, TextStyle or ImageStyle types from react-native. Now I wonder if that's a blunder or you have some advanced Typescript mechanism set up I don't know about 😂

2. You mentioned skipLibCheck: true. It's not so nice to force users of the library to use it, especially if the fix is relatively easy. Imagine somebody using 50 packages, everything is type-checked with TS, and suddenly you force users into enabling that 😕

Maybe instead of avoiding Typescript, it's worth to embrace it, so both library authors and users can benefit? 🙏🏻 🤝

[mdjastrzebski]

@erheron Just released v12.4.1, could you check if it solves the issue for you?

[erheron]

@erheron Just released v12.4.1, could you check if it solves the issue for you?

@mdjastrzebski Typescript is not failing anymore, and we didn't even have to enable skipLibCheck! 🎉
We also had a test which utilized toHaveStyle and it also still compiles with no errors ✅

I am worried, though, about things you mentioned here. If there will be any problems, I'll let you know here or in another issue

Thanks again for quick communication ❤️

[mdjastrzebski]

🎉 This issue has been resolved in RNTL v12.4.1!