私はjsユニットテストに不慣れで、バックボーンコンタクトマネージャーのチュートリアルにモカを使用しようとしています this github repo にあります。ただし、最初にグローバルwindow.ContactManager変数が存在するかどうかをテストし、後でstart関数内のrouter.on機能をテストしたいと考えていました。変数は次のようになります。
window.ContactManager = {
Models: {},
Collections: {},
Views: {},
start: function(data) {
var contacts = new ContactManager.Collections.Contacts(data.contacts),
router = new ContactManager.Router();
router.on('route:home', function() {
router.navigate('contacts', {
trigger: true,
replace: true
});
});
router.on('route:showContacts', function() {
var contactsView = new ContactManager.Views.Contacts({
collection: contacts
});
.....
動作しない私のテスト:var expect = require( 'chai')。expect;
describe("Application", function() {
it('creates a global variable for the name space ContactManager' , function () {
expect(ContactManager).to.exist;
})
});
コンソールでテストを実行してモカに存在するグローバルウィンドウ変数をテストしてアクセスするにはどうすればよいですか?
ブラウザでJavaScriptコードを実行することと、ノードでJavaScriptコードを実行することの違いを無視しています。
ブラウザでは、window
名は、すべてのグローバル変数を保持するオブジェクトへの参照です。したがって、最も外側のスコープでfoo = 1
を実行すると、グローバルfoo
を宣言します。これは、window.foo
としてもアクセスできます。逆に、window.bar = 1
のような新しいフィールドを割り当てると、bar
という新しいグローバルが作成されます。
Nodeでは、グローバルオブジェクトはglobal
としてアクセスされます。したがって、最も外側のスコープでfoo = 1
を実行すると、foo
もglobal.foo
としてアクセスできます。そして、global.bar = 1
を実行すると、bar
という名前の新しいグローバルがあります。
コードは、グローバルオブジェクトへの参照ではないように見えるwindow
オブジェクトを変更することを示しています。オプション:
NodeではなくブラウザでMochaを実行します。 Mochaのドキュメント を参照してください。
Node環境を設定して、ノードを満たすのに十分なブラウザ環境を模倣します。グローバルwindow
変数をglobal
mightで十分ですが、Backboneがこれで満足できるかどうかを知るのに十分なバックボーンは知りません。
jsdom でバックボーンベースのコードを実行します。 Jsdomは、コードがブラウザーで実行されているかのように、現実的なwindow
およびdocument
を提供しますが、制限があります。バックボーンがこれらの制限に満足するかどうかはわかりません。
別の解決策は https://www.npmjs.com/package/window-or-global を使用することです
import React, { Component } from 'react'
// in node, you'll get the global object instead of crashing by an error
import root from 'window-or-global'
class MyComponent extends Component {
// this method is only invoked in the browser environment
componentDidMount() {
root.addEventListener(/*...*/)
}
componentWillUnmount() {
root.addEventListener(/*...*/)
}
render() {}
}
// Voilà. Enjoy your universal react component! ;)
// No more 'window is not defined' errors when you render your component
// on server side.
インストールするには、npm install --save window-or-global
。
サーバーでテストを実行すると(たとえば、 mocha-webpack を使用して)、ブラウザーよりもはるかに高速になります。