Search code examples
typescriptreact-nativets-jestbabel-jestjest-enzyme

Babel error while running Jest/Enzyme tests on React Native


After a huge package upgrade, when running Jest tests on our application, we have this error :

TypeError: [BABEL] /home/grubshka/devel/project/src/engine/models/Hive.ts: Cannot add property 1, object is not extensible
  at Array.push (<anonymous>)

  at node_modules/@babel/core/lib/config/full.js:314:26
  at Function.<anonymous> (node_modules/@babel/core/lib/gensync-utils/async.js:25:3)
  at evaluateSync (node_modules/gensync/index.js:251:28)
  at Function.sync (node_modules/gensync/index.js:89:14)
  at sync (node_modules/@babel/core/lib/gensync-utils/async.js:68:25)
  at sync (node_modules/gensync/index.js:182:19)
  at onFirstPause (node_modules/gensync/index.js:210:24)

The first path for the error is quite random, sometimes it's from react-native files...

On a local computer, if we randomly run tests on specific files, after some tests it starts working, and after this all tests works, seems like there is some cache somewhere... On the CI, it never works.

Here's our main configuration files :

// babel.config.js

module.exports = {
  presets: [
    'module:metro-react-native-babel-preset',
    '@babel/preset-typescript',
    '@babel/preset-flow'
  ],
  plugins: [
    ['@babel/plugin-transform-flow-strip-types'],
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    ['@babel/plugin-proposal-class-properties', { loose: true }]
  ],
  env: {
    production: {
      plugins: ['react-native-paper/babel']
    }
  }
}
// jest.config.js

const { defaults: tsjPreset } = require('ts-jest/presets')

module.exports = {
  ...tsjPreset,
  preset: 'react-native',
  globals: {
    'ts-jest': {
      tsconfig: 'tsconfig.jest.json',
      babelConfig: true
    }
  },
  transform: {
    ...tsjPreset.transform,
    '^.+\\.jsx?$': '<rootDir>/node_modules/react-native/jest/preprocessor.js',
    '^.+\\.tsx?$': 'ts-jest'
  },
  /*
  transformIgnorePatterns: [
    'node_modules/(?!(react-native|react-native-elements|react-native-vector-icons|react-native-ratings|react-native-status-bar-height|react-native-maps|react-native-maps-super-cluster|@beeobs)/)'
  ],
  transformIgnorePatterns: [
    '<rootDir>/node_modules/react-native/react-native-fs/.+'
  ],
  */
  testRegex: '(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  modulePathIgnorePatterns: ['<rootDir>/dist/'],
  setupFiles: ['./jest.setup.js'],
  setupFilesAfterEnv: [
    'jest-enzyme',
    '<rootDir>/jest.env.js'
  ],
  testEnvironment: 'enzyme',
  testEnvironmentOptions: {
    enzymeAdapter: 'react16'
  }
}
// tsconfig.json

{
    "compilerOptions": {
        "target": "esnext", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
        "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
        "lib": [
          "es6",
          "dom"
        ], /* Specify library files to be included in the compilation. */
        "allowJs": true, /* Allow javascript files to be compiled. */
        "jsx": "react-native", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
        "noEmit": true, /* Do not emit outputs. */
        "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
        "strict": true, /* Enable all strict type-checking options. */
        "strictPropertyInitialization": false, /* Enable strict checking of property initialization in classes. */
        "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
        "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
        "typeRoots": [ /* List of folders to include type definitions from. */
            "./types",
            "./node_modules/@types"
        ],
        "noImplicitAny": false,
        "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
        "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
        "resolveJsonModule": true, /* Resolve JSON files as modules, used for localization as of right now */
        "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
        "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
        "skipLibCheck": true
    },
    "exclude": [
        ".yalc",
        "node_modules/*",
        "babel.config.js",
        "metro.config.js",
        "jest.config.js",
        "**/*.test.tsx",
        "**/__mocks__/**",
        ".eslintrc.js"

    ],
    "include": [
        "**/*.ts",
        "**/*.tsx",
        "**/*.js",
        "**/*.jsx"
    ]
}

I can provide more config files if required.

Thanks !


Solution

  • Updating Jest and Babel (and all our modules) fixed the bug...