I'm new to jest and react and I just installed the required packages to get react running. Now I want to add some tests to the already created React Components. For that I'm using Jest. Following the documentation of jest when I run npm run test command, it throws the following error:

 D:\Users\rdmello\Documents\linqin_Updated12-2\trunk\WebReporting>npm 
run 
 test

 > [email protected] test D:\Users\rdmello\Documents\linqin_Updated12- 
 2\trunk\WebReporting
 > jest

  FAIL  Scripts/main/ItemViewer/uiComponent.test.js
  ● Test suite failed to run

ReferenceError: React is not defined

  1 | //export Label from './uiComponent';
  2 |
> 3 | class Label extends React.Component {
    |                     ^
  4 |     render() {
  5 |         console.log(this.props);
  6 |         if (this.props.hideName == false) {

  at Object.<anonymous> (Scripts/main/ItemViewer/uiComponents.jsx:3:21)
  at Object.<anonymous> 
   (Scripts/main/ItemViewer/uiComponent.test.js:5:1)

   Test Suites: 1 failed, 1 total
    Tests:       0 total
    Snapshots:   0 total
   Time:        1.424 s
   Ran all test suites.
   npm ERR! code ELIFECYCLE

Heres my package.json

{
 "name": "react",
 "version": "1.0.0",
 "main": "../",
  "license": "MIT",
 "scripts": {
  "build": "webpack",
  "compile": "babel src --presets react --out-dir static",
  "watch": "babel src --presets react --out-dir static --watch",
  "test": "jest"
 },
 "jest": {
 "transform": {
  "^. \\.[t|j]sx?$": "babel-jest"
  },
  "moduleFileExtensions": [
   "ts",
   "tsx",
   "js",
   "jsx",
   "json"
   ]
   },
 "dependencies": {
  "babel-types": "^6.26.0",
  "emotion": "^9.2.12",
  "emotion-server": "^9.2.12",
  "react": "^16.8.2",
  "react-dom": "^16.8.2",
  "react-emotion": "^9.2.12",
  "react-helmet": "^6.0.0",
  "react-jss": "^8.6.1",
  "react-router-dom": "^5.0.0",
  "react-select": "^3.0.4",
  "reactstrap": "^8.0.0",
  "styled-components": "^4.0.0"
 },
"devDependencies": {
 "@babel/cli": "^7.16.0",
 "@babel/core": "^7.16.5",
"@babel/plugin-transform-react-jsx": "^7.16.5",
"@babel/preset-env": "^7.16.5",
"@babel/preset-react": "^7.16.5",
"babel-jest": "^27.4.5",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"babel-plugin-transform-export-extensions": "^6.22.0",
"jest": "^27.4.5",
"react-test-renderer": "^17.0.2",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1"
}

}

.babelrc:

{
"presets": [
    "@babel/preset-env",
    [
        "@babel/preset-react",
        { "runtime": "automatic" }
    ]
],
"plugins": [
    "transform-export-extensions",
    "transform-es2015-modules-commonjs",
    "@babel/plugin-transform-react-jsx"
]}

babel.config.json

{
 "presets": [
[
  "@babel/preset-env",
  {
    "runtime": "automatic"
  }
],
[
  "@babel/preset-react",
  {
    "runtime": "automatic"
  }
]
]
}

webpack.config.js

const path = require('path');

module.exports = {
entry: '../WebReporting/Scripts/main/ItemViewer/Entry.js',
output: {
    filename: 'webpackMain.js',
    path: path.resolve(__dirname, 'dist'),
},
externals: {
    'react': 'React'
}
};

My Jest test

import React from 'react';
//import * as React from 'react';
//import React, { Component } from 'react';
import renderer from 'react-test-renderer';
import Link from '../ItemViewer/uiComponents';

window.React = React


test('Link changes the class when hovered', () => {
const component = renderer.create(
    <Link page="http://www.facebook.com">Facebook</Link>,
);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();

// manually trigger the callback
tree.props.onMouseEnter();
// re-rendering
tree = component.toJSON();
expect(tree).toMatchSnapshot();

// manually trigger the callback
tree.props.onMouseLeave();
// re-rendering
tree = component.toJSON();
expect(tree).toMatchSnapshot();
});

And my React Component:

class Label extends React.Component {
render() {
    console.log(this.props);
    if (this.props.hideName == false) {
        return (
            <label id={this.props.name} className={this.props.classes}>{this.props.name} : 
      {this.props.value}</label>
        );       
    } else {
        return (
            <label id={this.props.name} className={this.props.classes}> {this.props.value} 
          </label>
        );
    }
    }
    }

As you can see I tried all the solutions like importing React in different ways, adding a webpack.config.js and adding extra plugins in .babelrc. But I'm still not able to get this resolved. Could someone please help. Thanks.

CodePudding user response：

You haven't imported React in the file where your component is.

Just add this import statement to the top of uiComponents.jsx:

import React from 'react';