1

Description

I'm using react-native-reanimated and when I'm testing, useSharedValue throws an error that it's not a function when using jest and react-native-testing-library. I've mocked react-native-reanimated by using the mock provided as part of the package. I also notice VS Code highlights that reanimated has no exported member useSharedValue, useAnimatedStyle and withTiming, however the component still runs properly without any errors.

Does anyone know what needs to be done to mock it properly?

Code

The Test to see if the component renders

import React from "react";
import { render } from "react-native-testing-library";
import { Switch } from "../src/native/Switch";

describe("Switch Package", () => {
it("renders", () => {
render();
});
});

Mock file which is placed in mocks named react-native-reanimated.js

jest.mock("react-native-reanimated", () => require("react-native-reanimated/mock") );

The Component using Reanimated - Switch.tsx

import { Button } from 'react-native';
import {
useSharedValue,
useAnimatedStyle,
withTiming,
Easing,
} from 'react-native-reanimated';

function Switch() {
const opacity = useSharedValue(0);

const style = useAnimatedStyle(() => {
return {
opacity: withTiming(opacity.value, {
duration: 200,
easing: sing.out(Easing.cubic),
}),
};
});

return (

<Animated.View style={[{width: 100, height: 100, backgroundColor: 'green'}, style]} />
<Button onPress={() => (opacity.value = 1)} title="Hey" />

);
}

Package Versions

React: 16.11.0 React Native: .062.2 React Native Reanimated: 2.0.0-alpha.3

ScreenShots

VS Code Screenshot Test Error

The Coder
  • 71
  • 1
  • 5
  • Reanimated doesn't have hooks in typings, extend them with custom .d.ts. It doesn't have a mock for hooks, you need to extend them too. That's what you sign up for as alpha tester. – Estus Flask Jul 08 '20 at 07:00
  • Ah that makes sense, thanks @EstusFlask! How would I go about doing that? I'm still new to TypeScript and testing. I'm mainly concerned with creating the mock for the hooks – The Coder Jul 08 '20 at 16:31
  • Cannot provide you with working solution. But for augmenting an existing mock you need something like `jest.mock("react-native-reanimated", () => ({...require("react-native-reanimated/mock"), useSharedValue: jest.fn(v => v)}))`. And for augmenting TS types, see https://stackoverflow.com/questions/46493253/typescript-extend-third-party-declaration-files – Estus Flask Jul 08 '20 at 18:13

0 Answers0