酶导入参考错误

问题描述

我正在尝试使用酶和笑话为 react-native 组件编写一个基本测试.我收到一个错误，提示未正确导入酶:

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.

由于我是新手，我尝试重新安装酶包并盲目摆弄代码.不使用来自酶工作的浅层的基本测试，即expect(true).toBe(true).我已经浏览了很多处理 JS 中的 referenceErrors 的问题，但似乎没有一个适用于这种情况(无论如何，在我没有经验的眼中).

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
  });
});

据我所知，我的 package.json 具有正确的依赖项.我试过重新安装酶但没有成功.这是:

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"
    ]
  }
}

在这种情况下，什么可能/会抛出这个 ReferenceError?如果我尝试 mocha/chai 看看是否有效，我可能很快就会发表评论，但此时我宁愿保持开玩笑.

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.

推荐答案

问题源于 ES6 中导入的提升 这里有更详细的解释.使用 babel-jest 作为预处理器可以解决这个问题，但保留setupEnvScriptFile"很重要.

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".

对我有用的例子

"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"
    ]
  },

这篇关于酶导入参考错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！