2017-11-16 4 views
6

私は反応が非常に新しく、私はトランスファーなしでReact 14を使ってコードを書いています。今私は単体テストにKarma-Jasmineを使用したいと思いますが、私のテストではアプリケーションのレンダリングに失敗しているようです。 ユニットテストはカルマとジャスミンを使用して反応します

I以下の構造を有する:

node_modules 
MyApp/ 
    /js/ *.js 
    /test/*.js 
Karma.conf.js 
package.json 
index.html 

私のindex.html:

<html> 
<div id="content"></div> 
<script src="js/react-0.14.7.js"></script> 
<script src="js/react-dom-0.14.7.js"></script> 

<script src="js/App.js"></script> 
<script src="js/main.js"></script> 
<link rel="stylesheet" href="style.css"> 
</body> 
</html> 

マイmain.js:

ReactDOM.render(React.createElement(App), document.getElementById('content')) 

私のアプリは、その後、以下のようなものです:

var h = React.createElement; 

var Command = React.createClass({ 
    render: function(){ 
    return h(....) 
    } 
}) 

次のように私のテストコードは次のとおりです。

describe('App', function() { 
beforeEach(function() { 
fixture.load('index.htm'); 
}); 

beforeEach(function() { 
ReactDOM.render(React.createElement(App), document.getElementById('content')); 
}); 

it('accepts elements', function() { 
    document.getElementById('x').value = 1; 
    document.getElementById('y').value = 2; 
    document.getElementById('setbtn').click(); 
}); 

}); 

そして、ここではエラーです:

Uncaught ReferenceError: App is not defined 
at main.js:2 
(anonymous) @ main.js:2 
debug.html:1 (WEB_PAGE context) Lazy require of app.binding did not set the binding field 
. 
. 
. 
ReferenceError: fixture is not defined 
at UserContext.<anonymous> (main.test.js:6) 

デバッグカルマは私のコンポーネントで機能を見ることができるように私のファイルがロードされている示しています。私はHtml2jsをインストールし、私のKarma.conf.jsに追加しました。私はウェブ上のほとんどの文書を読んだが、助けにはならなかった。

私は間違っていますか? I

+0

「Uncaught ReferenceError:App is not defined」 - 「App」ではなく「Command」というグローバル変数としてエクスポートしているようです。また、karma-fixtureも含める必要があります(インストール手順はgithub.com/billtrik/karma-fixtureを参照してください)。最後に、あなたのHTMLが不正です。オープニングボディータグはありません –

答えて

3

js-fixturesをお使いですか? はその後、次のように記述する必要があります。

fixtures.load('index.htm'); // <--- fixtureS not fixture! 
+1

いいえ、私はそうではありません。私はカルマとジャスミンだけを使用しています。これらの2つでテストを書くことはできますか?別のパッケージが必要ですか? – msc87

+1

作業用のテストユニットをセットアップしてもらえますか? – msc87

3

我々が反応するアプリケーションをテストするために多くのテストツールを持っています。初心者が正確に何が使用されているのかを理解するのが混乱することがあります。以下では、さまざまなツールとそれらが主に使用されているものを明確にしました。

チャイ

これは、アサーション/期待ライブラリです。 expect/should/assertはchaiによって与えられた関数です。

モカ/ジャスミン

これは、あなたのテストを実行し、テスト結果をログに記録するために使用されるテストランナー、です。

記述/ it/beforeEach:mocha/jasmineの関数を使用してテストを構成します。

は、それが特定の条件が満たされているものを指定→→機能を説明して

を記述する。説明

beforeEach→セットアップテスト内部の生活、それは

にテストの例を開始する前に:それはすることが容易になりますリアクトため

describe "Strawberry" 
    - it "is red" 
    - expect(strawberry.color).to.be('red') 
- it "a type of fruit" 
    - expect(strawberry.type).to.be('fruit) 

酵素

JavaScriptのテスト・ユーティリティアサート、操作、および通過を行います。それは、ReactDOMと、JQueryのようなReact ComponentをシミュレートしてDOMを探します。

Reactコンポーネントを浅くレンダリングしたり、コンポーネントに特定の子があるかどうか、または特定の小道具があるかどうかを確認するために使用できます。

import MyComponent from ‘./MyComponent’; 
import Foo from ‘./Foo’; 

describe(‘<MyComponent />’,() => { 
    it(‘renders three <Foo /> components’,() => { 
    const wrapper = shallow(<MyComponent foo=’bar’ />); 
    expect(wrapper.find(Foo)).to.have.length(3); 
    expect(wrapper.props().foo).to.equal(‘bar’); 
    }); 
}); 
関連する問題