0

我刚刚开始使用 Enzyme 和 React，我有点困惑。我有一个不需要 React 的简单测试通过。

src/containers/App/App.spec.js： 

import { expect } from 'chai'
import { shallow } from 'enzyme'

describe('hello world', function() {
  it('hello world', () => {
    expect(true).to.be.true;
  })
});

npm test

  hello world
    ✓ hello world

PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 1 of 1 SUCCESS (0.011 secs / 0.005 secs)
TOTAL: 1 SUCCESS

现在我想对我的 App 组件进行基本测试，看看它是否呈现为一个 div [当我在浏览器中加载它时它会这样做]。这就是失败发生的地方。

src/containers/App/App.spec.js：

import React from 'react'
import { expect } from 'chai'
import { shallow } from 'enzyme'

import App from './App'
import styles from './styles.module.css'

describe('<App />', function () {
  it('renders as a div', () => {
    const wrapper = shallow(<App />);
    //wrapper.debug();
    expect(wrapper.type()).to.eql('div');
  })
});

npm test

<App />
    ✗ renders as a div
    null is not an object (evaluating 'ReactInstrumentation.debugTool.onSetDisplayName')
    ShallowComponentWrapper@tests.webpack.js:75869:34
    _render@tests.webpack.js:75919:48
    _batchedRender@tests.webpack.js:75901:20
    batchedUpdates@tests.webpack.js:15977:16
    batchedUpdates@tests.webpack.js:1068:35
    render@tests.webpack.js:75894:31
    render@tests.webpack.js:39176:40
    tests.webpack.js:51532:33
    perform@tests.webpack.js:2952:25
    batchedUpdates@tests.webpack.js:15979:27
    batchedUpdates@tests.webpack.js:1068:35
    tests.webpack.js:51531:42
    withSetStateAllowed@tests.webpack.js:40282:6
    ShallowWrapper@tests.webpack.js:51530:39
    shallow@tests.webpack.js:70431:39
    tests.webpack.js:56497:40


PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.016 secs / 0.005 secs)

我想知道是什么导致了null is not an object错误。这让我觉得我们期待某物成为一个App对象，但事实并非如此？

这是呈现浏览器的实际应用程序：

渲染

src/containers/App/App.js

import React from 'react'
import ReactDOM from 'react-dom'

import styles from './styles.module.css'

const App = React.createClass({
  render: function() {
    return (
      <div className={styles.wrapper}>
        <h1>
          Hello!
        </h1>
      </div>
    )
  }
});

module.exports = App;

src/app.js

import React from 'react'
import ReactDOM from 'react-dom'

import 'font-awesome/css/font-awesome.css'

import './app.css'

import App from 'containers/App/App'

const mountNode = document.querySelector('#root');
ReactDOM.render(<App />, mountNode);

仅供参考，我的package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "start": "NODE_ENV=development ./node_modules/.bin/hjs-dev-server",
    "test": "NODE_ENV=test ./node_modules/karma/bin/karma start karma.conf.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^6.3.7",
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-polyfill": "^6.9.1",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-stage-0": "^6.5.0",
    "babel-register": "^6.9.0",
    "chai": "^3.5.0",
    "chai-enzyme": "^0.5.0",
    "css-loader": "^0.23.1",
    "cssnano": "^3.7.3",
    "dotenv": "^2.0.0",
    "enzyme": "^2.4.1",
    "expect": "^1.20.2",
    "file-loader": "^0.9.0",
    "hjs-webpack": "^8.3.0",
    "jasmine-core": "^2.4.1",
    "json-loader": "^0.5.4",
    "karma": "^1.1.1",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-mocha": "^1.1.1",
    "karma-phantomjs-launcher": "^1.0.1",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "0.0.26",
    "karma-webpack": "^1.7.0",
    "mocha": "^2.5.3",
    "phantomjs-polyfill": "0.0.2",
    "phantomjs-prebuilt": "^2.1.7",
    "postcss-loader": "^0.9.1",
    "precss": "^1.4.0",
    "react-addons-test-utils": "^15.2.1",
    "sinon": "^1.17.4",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.1"
  },
  "dependencies": {
    "font-awesome": "^4.6.3",
    "react": "^15.2.1",
    "react-dom": "^15.2.1",
    "react-router": "^2.5.2"
  }
}
4

2 回答 2

2

似乎这是 React 15.2.1 中引入的错误。如果我在 package.json 中将以下包降级为严格的 15.2.0，它可以解决问题。“react” “react-dom” “react-addons-test-utils”

于 2016-07-16T08:04:05.100 回答
2

---{ 删除了错误的原始帖子} ---

- - 编辑

我现在可以肯定地回答这个问题

从 react 15.2.0 到 react 15.2.1 的更新做了一些改变。

结果是，react-addons-test-utils 不会在生产模式下运行，

该问题部分与您使用 hjs-webpack 的事实有关。

在生产模式下，hjs-webpack 将执行优化和缩小，并且从 react 15.2.1 起，react-addons-test-utils（酶的依赖项）将不会在此环境中运行

我希望在你的 webpack 中有一个 prod 配置、一个 dev 配置和一个 test 配置。您应该确保您的测试配置包含您的开发配置，否则您将在生产模式下运行测试。

例如：在您的 hjs-webpack getConfig 对象中

如果你有一个 webpack.config.js 行 

isDev: process.env.NODE_ENV === 'development'

改成：

isDev: process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test'
于 2016-07-15T21:22:56.380 回答