react-native, jest, ts-jest: ReferenceError: React is not defined

Question

I have been struggling for a couple of days now to get tests running for simple react-native with expo + typescript + jest + ts-jest. I have already asked a related question here Here is the setup of my project:

tsconfig.json

    {
      "compilerOptions": {
        "noEmit": true,
        "lib": ["dom", "esnext"],
        "jsx": "react-native",
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true,
        "skipLibCheck": true
      }
    }

babel.config.json

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"]
  };
};

jest.config.js (see official github setting of react-native + ts-jest)

const { defaults: tsjPreset } = require("ts-jest/presets");
module.exports = {
  ...tsjPreset,
  preset: "react-native",
  transform: {
    ...tsjPreset.transform,
    "\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
  },
  globals: {
    "ts-jest": {
      babelConfig: true
    }
  },
  cacheDirectory: ".jest/cache"
};

I get this error

ReferenceError: React is not defined

because I am importing react like this in my file: import React from 'react'

If I import like import * as React from 'react' it works.

Any help will be greatly appreciated as I have spent already a few days in this project.

Any lock with this?

ataravati
– ataravati

2020-03-12 20:16:35 +00:00
Commented Mar 12, 2020 at 20:16 — ataravati
– ataravati, Commented Mar 12, 2020 at 20:16

Simon Reggiani · Accepted Answer · 2019-12-02 03:03:38Z

7

I had the exact same issue and fixed it by changing my tsconfig.json from

{
  "compilerOptions": {
    /* Basic Options */
    "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"
    ] /* Specify library files to be included in the compilation. */,
  ...
  }
}

to

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es2017" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
    "module": "ESNext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
    "lib": [
      "es2017"
    ] /* Specify library files to be included in the compilation. */,
  ...
  }
}

answered Dec 2, 2019 at 3:03

Simon Reggiani

56010 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mehmet N. Yarar Over a year ago

this solution worked for me (expo sdk39). any explanation why?

Collectives™ on Stack Overflow

react-native, jest, ts-jest: ReferenceError: React is not defined

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related