facebook / react-native

A framework for building native applications using React
https://reactnative.dev
MIT License
119.12k stars 24.32k forks source link

Tests failing after upgrading from v0.75.4 to to v0.76.1 #47421

Open eduardo-santos-tribia opened 1 day ago

eduardo-santos-tribia commented 1 day ago

Description

Hi, I'm having multiple errors when running my Jest tests after upgrading to v0.76.1. Previously all of them were working fine in v0.75.4. I'm unsure if the error is related to the new architecture since they're happening only during tests. The App at least on iOS is building and running fine in debug mode.

In the example below I'll show the error related to mocking react-native-keyboard-controller.js, but the error also happens with other third-party library mocks (react-native-gesture-handler for example), I'm just focusing on this one to make it easier to understand.

All errors show the same "ReferenceError: _ii is not defined" message:

Test suite failed to run

    ReferenceError: _ii is not defined

      1 | jest.mock('react-native-keyboard-controller', () =>
    > 2 |   require('react-native-keyboard-controller/jest'),
        |   ^
      3 | )
      4 |

Setup files for Test:

__mocks__/react-native-keyboard-controller.js

jest.mock('react-native-keyboard-controller', () =>
  require('react-native-keyboard-controller/jest'),
)

jest.setup.js require('@shopify/flash-list/jestSetup')


jest.config.js

module.exports = {
  preset: 'react-native',
  modulePaths: ['<rootDir>'],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  setupFiles: [
    './jest-setup.js',
    './node_modules/react-native-gesture-handler/jestSetup.js',
    './node_modules/newrelic-react-native-agent/jestSetup.js',
    './__mocks__/react-native-bootsplash.js',
    './__mocks__/react-native-device-info.js',
    './__mocks__/react-native-code-push.js',
    './__mocks__/react-native-auth0.js',
    './__mocks__/react-navigation-native.js',
    './__mocks__/react-navigation-native-stack.js',
    './__mocks__/react-navigation-drawer.js',
    './__mocks__/react-native-async-storage.js',
    './__mocks__/react-native-blob-util.js',
    './__mocks__/react-native-clipboard.js',
    './__mocks__/react-native-avoid-softinput.js',
    './__mocks__/react-native-pell-rich-editor.js',
    './__mocks__/react-native-document-picker.js',
    './__mocks__/newrelic-react-native-agent.js',
    './__mocks__/react-native-keyboard-controller.js',
    './__mocks__/react-native-date-picker.js',
    './__mocks__/storybook-react-native.js',
  ],
  setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
  transformIgnorePatterns: [
    'node_modules/(?!(jest-)?@?react-native|@react-native-community|@react-navigation|@pdftron|newrelic-react-native-agent)',
  ],
  moduleNameMapper: {
    '@storybook': '<rootDir>/__mocks__/storybook-react-native.js', // required to prevent storyboook import module error
    '\\.svg': '<rootDir>/__mocks__/svgMock.js',
  },
  testTimeout: 10000,
}

metro.config.js

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config')

const path = require('path')

const defaultConfig = getDefaultConfig(__dirname)
const { assetExts, sourceExts } = defaultConfig.resolver

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  transformer: {
    experimentalImportSupport: false,
    inlineRequires: true,
    babelTransformerPath: require.resolve(
      'react-native-svg-transformer/react-native',
    ),
  },
  resolver: {
    assetExts: assetExts.filter(ext => ext !== 'svg'),
    sourceExts: [...sourceExts, 'svg', 'mjs'],
  },
}

const mergedConfig = mergeConfig(defaultConfig, config)

// Storybook v8
const withStorybook = require('@storybook/react-native/metro/withStorybook')
const storybookOptions = {
  // Set to false to remove storybook specific options
  // you can also use a env variable to set this
  enabled: true,

  // set this to 'true' to remove storybook from the bundle when "enabled" is set to 'false'
  onDisabledRemoveStorybook: true,

  // Path to your storybook config
  configPath: path.resolve(__dirname, './.storybook'),
}

module.exports = withStorybook(mergedConfig, storybookOptions)

Steps to reproduce

  1. run the tests with the command yarn jest --config jest.config.js

React Native Version

0.76.1

Affected Platforms

Other (please specify)

Areas

Other (please specify)

Output of npx react-native info

System:
  OS: macOS 15.1
  CPU: (10) arm64 Apple M1 Max
  Memory: 2.89 GB / 64.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.18.0
    path: ~/.nvm/versions/node/v20.18.0/bin/node
  Yarn:
    version: 3.6.4
    path: ~/.nvm/versions/node/v20.18.0/bin/yarn
  npm:
    version: 10.8.2
    path: ~/.nvm/versions/node/v20.18.0/bin/npm
  Watchman:
    version: 2023.09.04.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods: Not Found
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.1
      - iOS 18.1
      - macOS 15.1
      - tvOS 18.1
      - visionOS 2.1
      - watchOS 11.1
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.23339.11.2421.12483815
  Xcode:
    version: 16.1/16B40
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.11
    path: /usr/bin/javac
  Ruby:
    version: 2.7.8
    path: /Users/eduardosantos/.rvm/rubies/ruby-2.7.8/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.1.0
    wanted: ^15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.1
    wanted: 0.76.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

Test suite failed to run

    ReferenceError: _ii is not defined

      1 | jest.mock('react-native-keyboard-controller', () =>
    > 2 |   require('react-native-keyboard-controller/jest'),
        |   ^
      3 | )
      4 |

      at ii (node_modules/react-native/src/private/animated/NativeAnimatedHelper.js:100:38)
      at createNativeOperations (node_modules/react-native/src/private/animated/NativeAnimatedHelper.js:99:68)
      at Object.createNativeOperations (node_modules/react-native/src/private/animated/NativeAnimatedHelper.js:120:26)
      at Object.<anonymous> (node_modules/react-native/Libraries/Animated/AnimatedEvent.js:16:1)
      at Object.<anonymous> (node_modules/react-native/Libraries/Animated/AnimatedImplementation.js:23:1)
      at Object.<anonymous> (node_modules/react-native/Libraries/Animated/Animated.js:21:1)
      at Object.require [as Animated] (node_modules/react-native/index.js:215:12)
      at Object.Animated (node_modules/react-native-keyboard-controller/jest/index.js:5:19)
      at require (__mocks__/react-native-keyboard-controller.js:2:3)
      at Object.<anonymous> (src/providers/BaseProviders.tsx:2:1)
      at Object.<anonymous> (src/providers/index.tsx:1:1)
      at Object.<anonymous> (src/test/providers.tsx:2:1)
      at Object.<anonymous> (src/test/utils.ts:4:1)

Reproducer

This happens in my company project.

Screenshots and Videos

No response

react-native-bot commented 1 day ago
:warning: Missing Reproducible Example
:information_source: We could not detect a reproducible example in your issue report. Please provide either:
  • If your bug is UI related: a Snack
  • If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.
react-native-bot commented 1 day ago
:warning: Missing Reproducible Example
:information_source: We could not detect a reproducible example in your issue report. Please provide either:
cipolleschi commented 1 day ago

Hi @eduardo-santos-tribia. Sorry to hear that. Some questions might help to understand what happened:

  1. are you using an external library for testing (e.g.: react-native-test-library)
  2. are you using the same version of jest?
eduardo-santos-tribia commented 10 hours ago

Hi @cipolleschi , thanks for the reply, I'll provide more info:

  1. Yes, I'm also using react-native-test-library

Below you can find some libraries that I'm using and their versions:

- jest: ^29.7.0
- @testing-library/jest-native: ^5.4.3
- @testing-library/react-native: ^12.8.1
- @babel/core: ^7.25.2,
- @babel/preset-env: ^7.25.3
- @babel/runtime: ^7.25.0
- babel-jest: ^29.7.0
- babel-loader: ^9.2.1
- babel-plugin-module-resolver: ^5.0.2
- @react-native/babel-preset: 0.76.1
- @react-native/eslint-config: 0.76.1
- @react-native/metro-config: 0.76.1
- @react-native/typescript-config: 0.76.1