useAnimatedReaction Unit Test Failing

[Stewartarmbrecht]

Can anyone explain why this test fails?

import { renderHook } from '@testing-library/react-native';
import { useSharedValue, useAnimatedReaction } from 'react-native-reanimated';
jest.useFakeTimers({ advanceTimers: true });

test('useAnimatedReaction', () => {
  const callback = jest.fn();
  const target = renderHook(() => {
    const sharedValue = useSharedValue(0);
    const reaction = useAnimatedReaction(
      () => sharedValue.value,
      (newValue, oldValue) => {
        callback(newValue, oldValue);
      },
      [sharedValue.value],
    );
    return { sharedValue, reaction };
  });
  expect(callback).toHaveBeenCalledTimes(0);
  target.result.current.sharedValue.value = 1;
  jest.runAllTimers();
  expect(callback).toHaveBeenCalledTimes(1);

  callback.mockClear();
  target.result.current.sharedValue.value = 2;
  jest.runAllTimers();
  expect(callback).toHaveBeenCalledTimes(1);
});

With this error on the last line above:

useAnimatedReaction
-----
Error: expect(jest.fn()).toHaveBeenCalledTimes(expected)

Expected number of calls: 1
Received number of calls: 0Jest
(method) jest.Matchers<void, jest.Mock<any, any, any>>.toHaveBeenCalledTimes(expected: number): void
Ensures that a mock function is called an exact number of times.

Here is my jest jest.config.ts:

/* eslint-disable @typescript-eslint/no-unsafe-assignment */
module.exports = {
  testEnvironment: 'jsdom',
  preset: 'jest-expo',
  setupFiles: ['./jest.setup.ts'],
  transform: {
    '^.+\\.tsx?$': [
      'ts-jest',
      {
        tsconfig: './tsconfig.json',
      },
    ],
  },
  testMatch: ['**/?(*.)+(spec|test).ts?(x)'],
  collectCoverageFrom: [
    '**/*.{ts,tsx}',
    '!**/coverage/**',
    '!**/node_modules/**',
    '!**/babel.config.js',
    '!**/jest.setup.ts',
    '!**/jest.setupAfterEnv.ts',
  ],
  coverageThreshold: {
    global: {
      lines: 100,
      branches: 100,
      functions: 100,
      statements: 100,
    },
  },
  moduleFileExtensions: ['ts', 'tsx', 'js'],
  transformIgnorePatterns: [
    'node_modules/(?!(jest-)?@?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|stask-expo|native-base|@expo-google-fonts/.*|nanoid)',
  ],
  coverageReporters: ['json-summary', 'text', 'lcov'],
  setupFilesAfterEnv: ['./jest.setupAfterEnv.ts'],
};

Here is my setupAfterEnv.ts file:

/* eslint-disable @typescript-eslint/no-unsafe-call */
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
/* eslint-disable @typescript-eslint/no-unsafe-return */
import 'react-native-gesture-handler/jestSetup';
import '@testing-library/jest-native';
import '@testing-library/jest-native/extend-expect';
import 'core-js';

// eslint-disable-next-line @typescript-eslint/no-var-requires
require('react-native-reanimated').setUpTests();

My jest.setup.ts is empty.

Here is my tsconfig.json file:

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "sourceMap": true,
  },
  "include": [
    "**/*.tsx",
    "**/*.ts",
    "**/*.js",
  ],
}

and Here is my package.json

{
  "name": "my-app",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "export REACT_NATIVE_PACKAGER_HOSTNAME=10.24.1.57; npx expo start --dev-client",
    "startLAN": "export REACT_NATIVE_PACKAGER_HOSTNAME=10.24.1.58; npx expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "test": "jest",
    "test_old": "jest --coverage && yarn lintstaged",
    "test:watch": "jest --watchAll",
    "test:badges": "npm run test:ci  && jest-coverage-badges --input coverage/coverage-summary.json --output __badges__",
    "lint": "eslint .",
    "lint-fix": "eslint . --fix",
    "lint-old": "tsc --noEmit && eslint --ext .js,.jsx,.ts,.tsx ./",
    "format": "prettier --write .",
    "prettier:write": "npx prettier --write **/*.{js,jsx,ts,tsx,json} && npx prettier --write *.{js,jsx,ts,tsx,json}",
    "lintstaged": "lint-staged",
    "coverage": "npx http-server coverage/lcov-report/"
  },
  "dependencies": {
    "@expo/vector-icons": "^13.0.0",
    "@react-native-async-storage/async-storage": "1.18.2",
    "@reduxjs/toolkit": "^1.9.5",
    "@types/sinon": "^10.0.16",
    "core-js": "^3.31.0",
    "expo": "^49.0.0",
    "expo-blur": "~12.4.1",
    "expo-build-properties": "~0.8.3",
    "expo-constants": "~14.4.2",
    "expo-dev-client": "~2.4.6",
    "expo-haptics": "~12.4.0",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.3",
    "react-native-flipper": "^0.198.0",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-paper": "^5.8.0",
    "react-native-reanimated": "~3.3.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-vector-icons": "^9.2.0",
    "react-native-web": "~0.19.6",
    "react-redux": "^8.1.1",
    "redux": "^4.2.1",
    "redux-persist": "^6.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.22.9",
    "@expo/ngrok": "^2.5.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/jest-native": "^5.4.2",
    "@testing-library/react-native": "^12.1.3",
    "@types/jest": "^29.5.3",
    "@types/react": "~18.2.14",
    "@types/react-test-renderer": "^18.0.0",
    "@typescript-eslint/eslint-plugin": "^6.2.1",
    "@typescript-eslint/parser": "^6.2.1",
    "eslint": "^8.46.0",
    "eslint-import-resolver-typescript": "^3.5.5",
    "eslint-plugin-import": "^2.28.0",
    "eslint-plugin-jsdoc": "^46.4.5",
    "eslint-plugin-prettier": "^5.0.0",
    "eslint-plugin-react": "^7.33.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "http-server": "^14.1.1",
    "jest": "^29.2.1",
    "jest-coverage-badges": "^1.1.2",
    "jest-expo": "^49.0.0",
    "jshint": "^2.13.6",
    "lint-staged": "^13.2.3",
    "metro-babel-register": "^0.77.0",
    "prettier": "^3.0.0",
    "react-devtools": "^4.28.0",
    "react-devtools-core": "^4.28.0",
    "react-test-renderer": "^18.2.0",
    "sinon": "^15.2.0",
    "ts-jest": "^29.1.1",
    "typescript": "^5.1.3"
  },
  "private": true,
  "lint-staged": {
    "./**/*.{ts,tsx,js}": [
      "eslint .",
      "prettier ."
    ]
  }
}

[Stewartarmbrecht]

As usual, take the time to write something out for help and you solve it immediately after. I was able to get the test to pass by adding a rerender call.

Is that the right way to run this test?

import { renderHook } from '@testing-library/react-native';
import { useSharedValue, useAnimatedReaction } from 'react-native-reanimated';
jest.useFakeTimers({ advanceTimers: true });

test('useAnimatedReaction', () => {
  const callback = jest.fn();
  const target = renderHook(() => {
    const sharedValue = useSharedValue(0);
    const reaction = useAnimatedReaction(
      () => sharedValue.value,
      (newValue, oldValue) => {
        callback(newValue, oldValue);
      },
      [sharedValue.value],
    );
    return { sharedValue, reaction };
  });

  expect(callback).toHaveBeenCalledTimes(0);

  target.result.current.sharedValue.value = 1;
  jest.runAllTimers();
  expect(callback).toHaveBeenCalledWith(1, null);

  target.rerender({});

  target.result.current.sharedValue.value = 2;
  jest.runAllTimers();
  expect(callback).toHaveBeenCalledWith(2, 1);
});