Question

我刚刚开始使用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"
  }
}

Answer 1

似乎这是React 15.2.1中引入的错误。如果我将以下软件包降级到package.json中的严格15.2.0，则可以解决问题。＆＃34;反应＆＃34; ＆＃34;反应-DOM＆＃34; ＆＃34;反应-插件 - 测试 - utils的＆＃34;

Answer 2

--- {删除了原帖作为错误} ---

---编辑

我现在可以明确回答

从15.2.0反应15.2.1的更新做出了一些更改。

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

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

在生产模式下，hjs-webpack将执行优化和缩小，而反应 - addons-test-utils（酶的依赖性）将不会在此环境中运行，如同反应15.2.1

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

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

如果您有webpack.config.js行

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

更改为：

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

酶测试结果为null不是一个对象

2 个答案: