ReferenceError on enzyme import

Question

I'm trying to write a basic test for a react-native component using enzyme and jest. I get an error alluding to enzyme not being imported correctly:

● SearchPage › it starts spinner when page is loading
  - ReferenceError: _enzyme is not defined
        at Spec.eval (__tests__/basic-test.js:12:16)
1 test failed, 0 tests passed (1 total in 1 test suite, run time 1.113s)
npm ERR! Test failed.  See above for more details.

I have tried reinstalling the enzyme package and blindly fiddling with the code as I am a novice. Basic tests not using shallow from enzyme work, i.e. expect(true).toBe(true). I've trawled through quite a few questions dealing with referenceErrors in JS, but none seem applicable in this scenario (in my inexperienced eyes anyway).

Here is the test file. Pretty bare, limiting where the error may be coming from.

jest.dontMock('../SearchPage');

import React from 'react';
import { shallow } from 'enzyme';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';

const SearchPage = require('../SearchPage');

describe('SearchPage', () => {
  it('starts spinner when page is loading', () => {
    const wrapper = shallow(<SearchPage />);

    // Check that it is false initially i.e. not loading.
    expect(wrapper.state('isLoading')).toBe(false);

    // Simulate a touch on 'Go' button and verify loading is now true
  });
});

My package.json has the correct dependencies as far as I am aware. I have tried reinstalling enzyme without success. Here it is:

{
  "name": "PropertyFinder",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react-native": "^0.20.0",
    "react-dom": "~0.14.7"
  },
  "devDependencies": {
    "babel-jest": "*",
    "enzyme": "^2.0.0",
    "jest-cli": "^0.8.2",
    "react": "^0.14.7",
    "react-addons-test-utils": "~0.14.0",
    "react-native-mock": "0.0.6"
  },
  "jest": {
    "scriptPreprocessor": "node_modules/react-native/jestSupport/preprocessor.js",
    "setupEnvScriptFile": "node_modules/react-native/jestSupport/env.js",
    "testPathIgnorePatterns": [
      "/node_modules/",
      "packager/react-packager/src/Activity/"
    ],
    "testFileExtensions": [
      "js"
    ],
    "unmockedModulePathPatterns": [
      "promise",
      "source-map",
      "react",
      "react-dom",
      "react-addons-test-utils",
      "fbjs",
      "enzyme",
      "cheerio",
      "htmlparser2",
      "lodash",
      "domhandler",
      "object.assign",
      "define-properties",
      "function-bind",
      "object-keys",
      "object.values",
      "es-abstract"
    ]
  }
}

What could/would be throwing this ReferenceError in this context? I may comment soon if I try mocha/chai to see if that works, but I'd rather stay with jest at this point.

Chris Petty Chris Petty · Accepted Answer · 2016-04-22T02:17:48

The issue rises from hoisting of imports in ES6 explained in more detail here. Using babel-jest as a preprocessor will resolve this issue, but it is important to keep the "setupEnvScriptFile".

Example of what is working for me

"jest": {
    "preprocessorIgnorePatterns": [
      "node_modules/enzyme"
    ],
    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
    "setupEnvScriptFile": "node_modules/react-native/jestSupport/env.js",
    "testPathIgnorePatterns": [
      "/node_modules/",
      "packager/react-packager/src/Activity/"
    ],
    "unmockedModulePathPatterns": [
      "react",
      "react-dom",
      "react-native",
      "react-addons-test-utils",
      "promise",
      "source-map",
      "enzyme"
    ]
  },

ReferenceError on enzyme import

1 Answers