Testing null中的酶测试结果不是对象

我刚刚开始研究酶和反应，我有点困惑。我有一个简单的测试通过，不需要反应

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测试

  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 />
    ✗ 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)

现在，我想对我的应用程序组件进行一个基本测试，看看它是否呈现为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');
  })
});

我想知道是什么导致

null不是一个对象

错误。这让我觉得我们期望某个东西成为

应用程序

对象，但它不是

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

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;

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

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

---编辑

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

从react 15.2.0更新到react 15.2.1进行了一些更改

结果是，react插件测试UTIL将不会在生产模式下运行

这个问题部分与您使用hjs网页有关

在生产模式下，hjs webpack将执行优化和缩小，并且自react 15.2.1起，react插件测试UTIL（酶的依赖性）将不会在此环境中运行

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

例如：在hjs网页包getConfig对象中

如果您有webpack.config.js行

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

改为：

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

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

---编辑

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

从react 15.2.0更新到react 15.2.1进行了一些更改

结果是，react插件测试UTIL将不会在生产模式下运行

这个问题部分与您使用hjs网页有关

在生产模式下，hjs webpack将执行优化和缩小，并且自react 15.2.1起，react插件测试UTIL（酶的依赖性）将不会在此环境中运行

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

例如：在hjs网页包getConfig对象中

如果您有webpack.config.js行

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

改为：

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

---

这似乎是React 15.2.1中引入的错误。如果我将package.json中的以下包降级为strict 15.2.0，它将修复问题。 “反应” “反应dom”

---

“react插件测试utils”

似乎这是react 15.2.1中引入的一个bug。如果我将package.json中的以下包降级为strict 15.2.0，它将修复问题。 “反应” “反应dom”

---

“react addons test utils”

如果使用console.log（wrapper.debug（））会发生什么？你看到那个部门了吗？您还可以只使用console.log（wrapper.type（））并查看它打印的内容吗？console.log（wrapper.debug（））似乎什么也不做？这听起来像一个愚蠢的问题，但我在哪里看到我的控制台输出？终端消息与beforeHmm相同。在上有一个控制台，它发出以下错误：debug.js:21:Uncaught TypeError:无法读取null的属性“onSetDisplayName”。如果使用console.log（wrapper.debug（）），会发生什么？你看到那个部门了吗？您还可以只使用console.log（wrapper.type（））并查看它打印的内容吗？console.log（wrapper.debug（））似乎什么也不做？这听起来像一个愚蠢的问题，但我在哪里看到我的控制台输出？终端消息与beforeHmm相同。在上有一个控制台，它发出以下错误：debug.js:21:Uncaught TypeError:无法读取Null的属性“onSetDisplayName”。这不是一个bug。React是整理一些他们认为不应该出现的东西。因此，他们不会在以后的版本中“修复”这个问题，相反，用户应该了解需要做哪些更改才能使其与最新版本兼容，因为这不是一个bug。React是整理一些他们认为不应该出现的东西。因此，他们不会在以后的版本中“修复”这个问题，相反，用户应该了解需要做哪些更改才能使其与最新版本一起工作