toHaveAnimatedStyle method throws a typescript error when expect is imported from @jest/globals

[dmontag23]

Description

The toHaveAnimatedStyle method on the jest expect object throws a Property 'toHaveAnimatedStyle' does not exist on type ... error when importing expect from @jest/globals. The error is only a typescript error as the test still runs without any issues and passes as expected.

This happens because node_modules/react-native-reanimated/lib/typescript/jestUtils.d.ts does not extend the @jest/globals expect matchers. For an example of how this can be done, check out this file from the react testing library.

I fixed this by adding a react-native-reanimated.d.ts file to my project with the following contents:

// Explicit `@jest/globals` `expect` matchers.
declare module '@jest/expect' {
  interface Matchers<R extends void | Promise<void>> {
      toHaveAnimatedStyle(style: Record<string, unknown>[] | Record<string, unknown>, config?: {
          shouldMatchAllProps?: boolean;
      }): R;
  }
}

Adding something similar to reanimated should automatically fix the issue.

Steps to reproduce

1. import {expect} from "@jest/globals";
2. Try using expect(<a component>).toHaveAnimatedStyle(<a style>) in a test. You should see the typescript error.

Snack or a link to a repository

Reanimated version

3.16.6

React Native version

0.76.1

Platforms

iOS

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[github-actions]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or a link to a repository section.

[szydlovsky]

Hey @dmontag23 if you kinda found the solution - would you maybe like to prepare a PR to Reanimated with the fix? You'll get a nice shiny Contributor label on GH 😅

P.S. sorry for the late reply - most of the team was out of office for whole Christmas and New Year holidays' period