のは、ユニットテストは、モカ、チャイ、およびテストランナーの代わりに使用されjsdomヘルパーを使用して、コンポーネントに反応するための簡単な例ですカルマのように。
あなたは次の依存関係が必要になります。
"dependencies": {
"react": "^15.1.0",
"react-dom": "^15.1.0"
},
"devDependencies": {
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"babel-register": "^6.9.0",
"chai": "^3.5.0",
"jsdom": "^9.3.0",
"mocha": "^2.5.3"
}
それはモカを指すNPMスクリプト持つことも便利です - npm run testをあなたのテストを実行します：あなたはあなたの依存関係を設定した後
"scripts": {
"test": "./node_modules/.bin/mocha"
},
をディレクトリ構造は次のようになります：
.
├── /src
│ └── component-to-test.js
├── /test
│ ├── /unit
│ │ └── component-to-test.spec.js
│ ├── /util
│ │ └── jsdom.js
│ └── mocha.opts
├── .babelrc
└── package.json
まず、.babelrcファイルから始めましょう。 JSXをJavaScriptに変換するには、Babelが必要です。 ES6構文を使用したい場合（強くお勧めします）、Babelもそれを手助けします。私はこれらのプリセットをdevDependenciesに含めました。
.babelrc：
{
"presets": ["es2015", "react"]
}
次に、我々はjsdomヘルパーを見てみましょう。 Reactコンポーネントをメモリ内のDOMにレンダリングするためにはこれが必要です。通常はカルマのようなテストランナーによって処理されます。
jsdom.js：
(function() {
'use strict';
var jsdom = require('jsdom'),
baseHTML,
window;
if (!global.window) {
baseHTML = '<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>Tests</title></head><body></body></html>';
window = jsdom.jsdom(baseHTML).defaultView;
global.window = window;
global.document = window.document;
global.navigator = window.navigator;
}
}());
当社モカテストで使用するためにこのjsdomヘルパーを活用するために、我々はいくつかの設定オプションを指定するmocha.optsファイルを設定する必要があります。テストを前処理するようにBabelに指示するコンパイラを追加します。require jsdomヘルパーがReactにコンポーネントをレンダリングするために使用するDOMを持つようにします。
mocha.opts：
--compilers js:babel-register
--recursive
--reporter spec
--ui bdd
--require ./test/util/jsdom.js
最後に、我々は、部品を反応させるのテストを開始することができます。一例として、ここではテストできる単純なコンポーネントがあります。
テストコンポーネント。js：
import React from 'react';
export default class TestComponent extends React.Component {
render() {
return (
<div className="test-component">Here is a test component</div>
);
}
}
ここに、このコンポーネントのマークアップをテストするテストスイートがあります。
試験component.spec.js：
import TestComponent from '../../src/test-component';
import {expect} from 'chai';
import React from 'react';
import ReactDOM from 'react-dom';
import ReactTestUtils from '../../node_modules/react/lib/ReactTestUtils';
describe('Test Component',() => {
let renderedNode;
function renderComponent() {
const componentElement = React.createElement(TestComponent),
renderedElement = ReactTestUtils.renderIntoDocument(componentElement);
renderedNode = ReactDOM.findDOMNode(renderedElement);
}
beforeEach(() => {
renderComponent();
});
it('should exist with the correct markup',() => {
expect(renderedNode.tagName).to.equal('DIV');
expect(renderedNode.className).to.equal('test-component');
expect(renderedNode.textContent).to.equal('Here is a test component');
});
});
この時点で、コマンドnpm run test単一通過試験をもたらすはずです。
それだけです！より高度なテスト手法を探しているなら、jsdomヘルパーの必要性を完全に回避し、テストに浅いレンダリングを使用することができます。このアプローチをとる場合は、Enzymeを強くお勧めします。
ご不明な点がありましたら教えてください。
カルマを使用する特別な理由はありますか？私はあなたに私の完全なテストのセットアップを与える答えを投稿することができますが、私はモカとチャイを使用し、私はカルマのようなテストランナーの必要はありません。 –
カルマを使用する特別な理由はありません。私はチュートリアルに従っていたようで、カルマやジャスミンのようなもののほとんどの例が明らかです。だからええ。しかし、その後、フォローアップの質問は、カルマ、モカ、グルプを使用することはできないのでしょうか？ – chrisrhyno2003
これは間違いなく可能ですが、これまでにやったことはないので、私はあなたに答えを投稿することはできません。しかしカルマやジャスミンを捨てても大丈夫なら、セットアップを投稿することができます。 –