1

I am trying to run a simple jest and enzyme test against a react component and test throws: ReferenceError: React is not defined. I followed all simple tutorials on jest and react testing but all of them resulted in the same exception. I used npm test and result was the same as yarn test, React not defined. I am confused. Any help would be appreciated.

Checkbox.test.jsx: simple test

import { shallow } from 'enzyme';
import sinon from 'sinon';

import Checkbox from './Checkbox';

describe('<Checkbox />', () => {
  it('should render three <Checkbox /> components', () => {
    const wrapper = shallow(<Checkbox />);
    expect(wrapper.prop('title')).toEqual('Events — Event Radar');
  });
});

Console log

$ yarn test
FAIL src\components\ReusableComponents\Checkbox.test.jsx (5.248s)
  <Checkbox />
    × should render three <Checkbox /> components (4ms)

  ● <Checkbox /> › should render three <Checkbox /> components

    ReferenceError: React is not defined

      at Object.<anonymous> (src/components/ReusableComponents/Checkbox.test.jsx:8:40)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        10.517s
Ran all test suites.
error Command failed with exit code 1.

package.json

{
  "name": "mi-benchmarking-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.17.0",
    "classnames": "^2.2.5",
    "history": "^4.7.2",
    "prop-types": "^15.6.0",
    "react": "^16.0.0",
    "react-bootstrap": "^0.31.5",
    "react-bootstrap-table": "^4.1.1",
    "react-dom": "^16.0.0",
    "react-logger": "^1.1.0",
    "react-pagination-table": "^1.1.0",
    "react-redux": "^5.0.6",
    "react-router": "^3.2.0",
    "react-router-redux": "^4.0.8",
    "react-scripts": "1.0.14",
    "react-simple-paginate": "^1.1.0",
    "react-table": "^6.6.0",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.6",
    "babel-core": "^6.26.0",
    "babel-eslint": "^6.0.4",
    "babel-jest": "^21.2.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-react-require": "^3.0.0",
    "babel-plugin-syntax-object-rest-spread": "^6.13.0",
    "babel-plugin-transform-object-spread-inline": "0.0.2",
    "babel-polyfill": "^6.8.0",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "clean-webpack-plugin": "^0.1.13",
    "copy-webpack-plugin": "^4.0.0",
    "css-loader": "^0.23.1",
    "enzyme": "^3.1.0",
    "enzyme-adapter-react-16": "^1.0.2",
    "eslint": "^3.19.0",
    "eslint-loader": "^1.5.0",
    "eslint-plugin-babel": "^4.1.2",
    "eslint-plugin-react": "^7.1.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.5",
    "html-webpack-plugin": "^2.16.1",
    "jest": "^21.2.1",
    "jest-enzyme": "^4.0.1",
    "json-loader": "^0.5.4",
    "postcss-loader": "^0.9.1",
    "redux-devtools": "^3.4.0",
    "sinon": "^4.0.2",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "2.6.1",
    "webpack-dev-server": "2.5.0",
    "webpack-manifest-plugin": "1.1.0"
  },
  "scripts": {
    "start": "npm run build:dev",
    "build:dev": "webpack-dev-server --inline --history-api-fallback",
    "build:test": "webpack --define process.env.NODE_ENV='test'",
    "build:stage": "webpack --define process.env.NODE_ENV='stage'",
    "build:prod": "webpack --define process.env.NODE_ENV='production'",
    "eject": "react-scripts eject",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage"
  },
  "jest": {
    "setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js"
  }
}

1 Answer 1

2

Import React in your test and the error should disappear:

import React from 'react';

I tried removing this import in one of my tests and I got the same error you mentioned.

I hope this helps.

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

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.