ReferenceError: React not defined in tests

Question

I'm using the laravel mix and it appears that I cannot get jest to find react if I am interpreting this issue properly.

My Test:

import React from "react";
import renderer from "react-test-renderer";
import AppLayout from "../AppLayout";

test("it renders", () => {
    const component = renderer.create(
        <AppLayout pageTitle={undefined}>App</AppLayout>
    );
    let tree = component.toJSON();
    expect(tree).toMatchSnapshot();
});

Here's my package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "test": "cross-env NODE_ENV=test jest --verbose"
    },
    "devDependencies": {
        "@babel/preset-env": "^7.4.2",
        "@babel/preset-react": "^7.0.0",
        "axios": "^0.18.0",
        "babel-jest": "^24.5.0",
        "bootstrap": "^4.3.1",
        "cross-env": "^5.2",
        "jest": "^24.5.0",
        "jquery": "^3.3",
        "laravel-mix": "^4.0.15",
        "lodash": "^4.17.11",
        "popper.js": "^1.14",
        "react": "^16.8.6",
        "react-dom": "^16.8.6",
        "react-test-renderer": "^16.8.6",
        "resolve-url-loader": "^3.0.1",
        "sass": "^1.17.3",
        "sass-loader": "^7.1.0"
    },
    "dependencies": {
        "@babel/core": "^7.4.0",
        "@babel/plugin-proposal-class-properties": "^7.4.0",
        "js-file-download": "^0.4.5",
        "moment": "^2.24.0",
        "npm-check-updates": "^3.1.3",
        "prop-types": "^15.7.2",
        "react-router-dom": "^5.0.0",
        "react-select": "^2.4.2"
    },
    "jest": {


"roots": [
        "resources/js/app"
    ],
    "transform": {".*": "./node_modules/babel-jest"}
}

}

.babelrc

{
    "env": {
        "test": {
            "presets": ["@babel/preset-env", "@babel/preset-react"],
            "plugins": ["@babel/plugin-proposal-class-properties"]
        },
        "development": {
            "presets": ["@babel/preset-env", "@babel/preset-react"],
            "plugins": ["@babel/plugin-proposal-class-properties"]
        },
        "production": {
            "presets": ["@babel/preset-env", "@babel/preset-react"],
            "plugins": ["@babel/plugin-proposal-class-properties"]
        }
    }
}

The error:

ReferenceError: React is not defined

      18 |         const { expanded } = this.state;
      19 |
    > 20 |         return (
         |         ^
      21 |             <div>
      22 |                 <nav
      23 |                     className="navbar"

I've tried everything I could find on stackoverflow & google to solve this issue. Including removing my node_modules folder and rebuilding many times to no avail.

Trần Hạnh · Accepted Answer · 2021-01-12 02:35:37Z

6

I have resolved this way: import * as React from 'react';

answered Jan 12, 2021 at 2:35

Trần Hạnh

1471 silver badge11 bronze badges

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

1 Comment

Maximilian Hils Over a year ago

Thanks! This looks like it couldn't possibly work, but it fixes it. 🙃

thecoolestguyever123 · Accepted Answer · 2019-04-01 18:07:09Z

2

Right so, the answer to this question is really interesting. So as you may know if you just import { Component } from 'react'; Then export default class MyComponent extends Component it WILL work and render in the browser. However when you go to test with jest you will get React undefined even if you import it into your test file.

The solution is simple, change it to import React, { Component } from 'react';

answered Apr 1, 2019 at 18:07

thecoolestguyever123

9831 gold badge6 silver badges22 bronze badges

3 Comments

ataravati Over a year ago

I have the same issue, but this didn't work for me.

metalheadcoder Over a year ago

@ataravati are you sure you imported in test file??

ataravati Over a year ago

@metalheadcoder This was more than a year ago. I don't remember.

blazehub · Accepted Answer · 2020-08-20 15:10:13Z

0

import React in test

import React from 'react';

answered Aug 20, 2020 at 15:10

blazehub

1,96022 silver badges25 bronze badges

Comments

Thuy · Accepted Answer · 2021-08-26 19:23:37Z

0

At the VERY top of my test file, I put:

/**

@jest-environment jsdom */

https://jestjs.io/docs/configuration#testenvironment-string

answered Aug 26, 2021 at 19:23

Thuy

1,6911 gold badge14 silver badges13 bronze badges

Comments

infamoustrey · Accepted Answer · 2019-03-29 15:54:01Z

-1

Edit: Issue definitely looks to be with your babel config, the react preset targets browsers using es6 which jest which targets node does not, try this

{
    "env": {
        "test": {
            "presets": [ ["env", { "targets": { "node": "current" } }]]
        },
        "development": {
            "presets": ["@babel/preset-env", "@babel/preset-react"],
            "plugins": ["@babel/plugin-proposal-class-properties"]
        },
        "production": {
            "presets": ["@babel/preset-env", "@babel/preset-react"],
            "plugins": ["@babel/plugin-proposal-class-properties"]
        }
    }
}

Also add this to your webpack.mix.js to make jest aware of node_modules(assumes your component is located in the a /modules directory)

.webpackConfig({
  resolve: {
    modules: [path.resolve(__dirname, 'resources/assets/js/modules'), 'node_modules']
  }
})

You can read more on how to configure babel here.

edited Mar 29, 2019 at 15:54

answered Mar 28, 2019 at 19:49

infamoustrey

7188 silver badges16 bronze badges

9 Comments

infamoustrey Over a year ago

I see dependencies, not sure how that relates to babel being configured properly.

thecoolestguyever123 Over a year ago

I have the babel presets specified in my package.json. under "babel": {} ..

infamoustrey Over a year ago

That's great and while that works fine for mix, which uses webpack to interpret es6 imports babel-jest won't because it uses nodejs to run tests. So that means your tests will need to use a different target than your actual application. I don't see your .babelrc so I don't know which environments you are targeting for testing but I assume you are trying to target browsers for everything.

thecoolestguyever123 Over a year ago

results are the same across the board no matter where i'm specifying my configuration for babel.

infamoustrey Over a year ago

.babelrc config?

|

Ehsan88 · Accepted Answer · 2021-09-14 17:40:59Z

-1

Update the packages using this:

npm audit fix

or:

npm audit fix --force

It worked for me but it may break some of the old packages you use?! I don't know. Please complete this answer if you know that.

answered Sep 14, 2021 at 17:40

Ehsan88

3,8215 gold badges33 silver badges55 bronze badges

Collectives™ on Stack Overflow

ReferenceError: React not defined in tests

6 Answers 6

1 Comment

3 Comments

Comments

Comments

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

3 Comments

Comments

Comments

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related