Question 35381 in React native Question posted in
The official React Native documentation can be found here.

React Native jest 26 to jest 27 upgrade is painful, timeout and animation

We are trying to upgrade our test environment from jest 26 to 27. This is our working branch : https://github.com/pass-culture/pass-culture-app-native/tree/update-jest-27

So far, we encounter a bunch of error that we are still unable to fix, for instance:

TypeError: requestAnimationFrame is not a function

    TypeError: requestAnimationFrame is not a function
      at start (node_modules/react-native/Libraries/Animated/animations/TimingAnimation.js:133:34)

TypeError: global.cancelAnimationFrame is not a function

    TypeError: global.cancelAnimationFrame is not a function

      at TimingAnimation.stop (node_modules/react-native/Libraries/Animated/animations/TimingAnimation.js:176:12)

Exceeded timeout of 5000 ms for a hook

    thrown: "Exceeded timeout of 5000 ms for a hook.
    Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

We have many test failing for this and have found a bunch of proposition but none worked to fix our test

This is the most present error.

If you have any idea, to make progress, it would be welcomed.

Reproduction

  1. Clone my repo git clone --single-branch --branche update-jest-27 https://github.com/pass-culture/pass-culture-app-native.git
  2. cd pass-culture-app-native
  3. yarn
  4. yarn test:unit

Additional context

System:
  OS: Linux dka 5.8.0-0.bpo.2-amd64 #1 SMP Debian 5.8.10-1~bpo10+1 (2020-09-26) x86_64 GNU/Linux
  CPU: (8) arm64
Binaries:
  Node: v16.13.2 - /home/dka/.nvm/versions/node/v16.13.2/bin/node
  Yarn: 1.22.15 - /home/dka/.yarn/bin/yarn
npmPackages:
  jest: 26.0.14 => 27.5.2
  react-native: 0.68.2
Tags:

2

Answers


  1. 0

    try add into jestSetup file

    beforeEach(() => {
  // @ts-ignore
  global.requestAnimationFrame = function (callback: any) {
    setTimeout(callback, 0);
  };
  global.cancelAnimationFrame = function (callback: any) {
    setTimeout(callback, 0);
  };
});
    Login or Signup to reply.
  2. 0

    I tried to mock global.cancelAnimationFrame and global.requestAnimationFrame but none of them worked for me (I’m using react-native).

    So, I had to mock this module in my setupFiles.js to fix the error:

    jest.mock('react-native/Libraries/Animated/animations/TimingAnimation.js');
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search