react-native-reanimated: Testing error: useSharedValue is not a function while testing
Description
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?
Screenshots
Steps To Reproduce
- Create the simple switch component
- Create the mock file
- Create the test
- Run the test
Expected behavior
I expected the render test to pass since I’m successfully mocking react-native-reanimated
Actual behavior
The render test fails due to useSharedValue not being a function. "TypeError: (0 , _reactNativeReanimated.useSharedValue) is not a function"
Snack or minimal code example
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(<Switch />); }); });`
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 ( <View> <Animated.View style={[{width: 100, height: 100, backgroundColor: ‘green’}, style]} /> <Button onPress={() => (opacity.value = 1)} title=“Hey” /> </View> ); }`
Package versions
- React: 16.11.0
- React Native: .062.2
- React Native Reanimated: 2.0.0-alpha.3
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 1
- Comments: 26 (13 by maintainers)
if you have just installed Reanimated, make sure to run packager again with
--reset-cache
.Also, for your animation you can do something like that:
I tried this solution as well but this also did not work.
worked for me.
Hi @terrysahaidak , I referred the document’s limitation section and found out I can work with flipper so I did the setup of that and now able to see log, but in above code as you corrected me earlier, I am getting 2 odd things,
By any chance will you be able to help please?
Could you try to use import from “src”
But also it’s weird your project doesn’t have a babel config file. At least the default one should be