Should withReanimatedTimer be exported or added to .d.ts?

Description

I’ve got a test failing with run without being wrapped by withReanimatedTimer.

Here’s the relevant code:

  const SHOW_ONLY_LOGO_TIMEOUT = 1000;
  const [isVisible, setIsVisible] = useState(true);

  const setVisibleFalse = () => {
    setIsVisible(false);
  };
  useEffect(() => {
    const id = setTimeout(() => {
      overlayViewOpacity.value = withSpring(0, { damping: 11.66 }, () => {
        runOnJS(setVisibleFalse)();
      });
    }, SHOW_ONLY_LOGO_TIMEOUT);

    return () => {
      clearTimeout(id);
    };
  }, [overlayViewOpacity]);

Here’s the Jest output:

  ● App Open - Not Logged In › should show the LandingScreen first

    TypeError: viewRef.current._component.setNativeProps is not a function

      at updatePropsInternal (node_modules/react-native-reanimated/lib/reanimated2/js-reanimated/index.web.js:14:36)
      at updateProps (node_modules/react-native-reanimated/lib/reanimated2/UpdateProps.js:42:5)
      at updatePropsJestWrapper (node_modules/react-native-reanimated/lib/reanimated2/UpdateProps.js:46:5)
      at jestStyleUpdater (node_modules/react-native-reanimated/lib/reanimated2/Hooks.js:326:9)
      at Mapper.mapper (node_modules/react-native-reanimated/lib/reanimated2/Hooks.js:364:17)
      at Mapper.execute (node_modules/react-native-reanimated/lib/reanimated2/js-reanimated/Mapper.js:21:14)
      at MapperRegistry.execute (node_modules/react-native-reanimated/lib/reanimated2/js-reanimated/MapperRegistry.js:27:24)
      at JSReanimated._onRender (node_modules/react-native-reanimated/lib/reanimated2/js-reanimated/JSReanimated.js:38:30)
      at Timeout._onTimeout (node_modules/react-native-reanimated/lib/reanimated2/js-reanimated/JSReanimated.js:33:22)


ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.

      at getNodeByText (node_modules/@testing-library/react-native/build/helpers/byText.js:96:20)
      at predicate (node_modules/@testing-library/react-native/build/helpers/byText.js:119:14)
      at _findAll (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:17085:7)
      at ReactTestInstance.findAll (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:17012:12)
      at queryAllByTextFn (node_modules/@testing-library/react-native/build/helpers/byText.js:118:28)

ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.

      at getNodeByText (node_modules/@testing-library/react-native/build/helpers/byText.js:96:20)
      at predicate (node_modules/@testing-library/react-native/build/helpers/byText.js:119:14)
      at _findAll (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:17085:7)
      at ReactTestInstance.findAll (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:17012:12)
      at queryAllByTextFn (node_modules/@testing-library/react-native/build/helpers/byText.js:118:28)
  console.error
    Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
        at fn (app/src/navigation/auth/LandingScreen/LandingLayout.tsx:32:3)
      89 |
      90 |   const setVisibleFalse = () => {
    > 91 |     setIsVisible(false);
         |     ^
      92 |   };
      93 |
      94 |   useEffect(() => {

      at CustomConsole.call [as error] (node_modules/react-native/Libraries/LogBox/LogBox.js:34:14)
      at printWarning (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:68:30)
      at error (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:44:5)
      at warnAboutUpdateOnUnmountedFiberInDEV (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14931:9)
      at scheduleUpdateOnFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12951:5)
      at setIsVisible (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7133:5)
      at setVisibleFalse (src/navigation/auth/LandingScreen/LandingLayout.tsx:91:5)

Documentation isn’t too clear - https://docs.swmansion.com/react-native-reanimated/docs/guide/testing/ but given this has a timeout I thought maybe to wrap the test with withReanimatedTimer

I’ve had a rough experience with:

jest.useFakeTimers();
// call animation
jest.runAllTimers();

possibly due to https://github.com/callstack/react-native-testing-library/issues/506

so that leaves us with withReanimatedTimer which does work when I wrap the function but I have to import from:

import { withReanimatedTimer } from "react-native-reanimated/lib/reanimated2/jestUtils";

which feels weird and TypeScript gives me the error:

TS7016: Could not find a declaration file for module 'react-native-reanimated/lib/reanimated2/jestUtils'. 'app/node_modules/react-native-reanimated/lib/reanimated2/jestUtils.js' implicitly has an 'any' type.   Try `npm i --save-dev @types/react-native-reanimated` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-native-reanimated/lib/reanimated2/jestUtils';`

shouldn’t these jestUtils be exported by the library rather than having to be accessed under the jestUtils directory?

Package versions

• React Native: 0.64.2
• React Native Reanimated: 2.2.0

[EduVencovsky]

I’m not sure if this is correct because I’m just starting to use withReanimatedTimer but couldn’t you just change the import from lib to src?

//                                                         src instead of lib
import {withReanimatedTimer} from 'react-native-reanimated/src/reanimated2/jestUtils';

This removes the typescript error and withReanimatedTimer it’s a function.

[pvinis]

withReanimatedTimer should be removed, and export and only use beforeTest and afterTest. wrapping feels dangerous, and I already had a couple of things show green when the test was actually failing, because of the wrapper. Also the wrapper doesn’t support async, so there are real limitations to it.