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

---{ 元の投稿を間違って削除しました } ---

- - 編集

はっきりと答えられるようになりました

反応15.2.0から反応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 に答える