Meteor mocha watchモードでは、アサーションメッセージの代わりにコード行を表示します

Question

時計モードでpracticalmeteor:mochaを使用していて、UIテスト（ユニットテストのテンプレートコンポーネント）を記述しました。

失敗したテストではアサーションメッセージが表示されず、代わりにコードスニペットが表示されるという奇妙な問題があります。

Iは、例えば、出力した画像を添付しています

残念ながら、私はパッケージやモカ自体のドキュメントでこれに関連する構成に関する情報を見つけることができませんでした。

// PACKAGES 
import {Meteor} from 'meteor/meteor'; 
import {Template} from 'meteor/templating'; 
import {$} from 'meteor/jquery'; 
import {Random} from 'meteor/random'; 
import {chai, assert} from 'meteor/practicalmeteor:chai'; 
import StubCollections from 'meteor/hwillson:stub-collections'; 
import {sinon} from 'meteor/practicalmeteor:sinon'; 

// HELPERS 
import {withRenderedTemplate, renderTemplate, withDiv} from '../../test-helpers.js'; 

// COMPONENTS 
import '../../../startup/both/schemaDefaults'; 
import {loadingClassName} from '../../components/loading/loading'; 
import {Comments} from '../../../api/comments/Comments'; 
import '../comments.js'; 


describe("UI/Comments", function() { 

    beforeEach(function() { 
     StubCollections.stub(Comments); 
     Template.registerHelper('_', key => key); 
    }); 

    afterEach(function() { 
     Template.deregisterHelper('_'); 
     StubCollections.restore(); 
     Meteor.subscribe.restore(); 
    }); 

    ////////////////////////////////////////////////////////  

    it("renders a loading symbol on load", function (done) { 

     sinon.stub(Meteor, 'subscribe',() => ({ 
      subscriptionId: Random.id(), 
      ready:() => false, 
     })); 

     withRenderedTemplate(Template.comments, {}, el => { 
      const target = $(el); 
      chai.assert.equal(target.find('.' + loadingClassName).length, 1); 
      done(); 
     }); 

    }); 

    //////////////////////////////////////////////////////// 

    it("displays a message if no comments exist for the given document", function (done) { 

     sinon.stub(Meteor, 'subscribe',() => ({ 
      subscriptionId: Random.id(), 
      ready:() => true, 
     })); 

     withRenderedTemplate(Template.comments, {docId: Random.id()}, el => { 
      const target = $(el); 
      chai.assert.equal(target.find('.' + loadingClassName).length, 0); 
      chai.assert.equal(target.find('.no-comments').length, 1); 
      done(); 
     }); 

    }); 

    //////////////////////////////////////////////////////// 

    it("displays comments, if comments are found", function (done) { 

     sinon.stub(Meteor, 'subscribe',() => ({ 
      subscriptionId: Random.id(), 
      ready:() => true, 
     })); 

     const userId = Random.id(); 
     const commentDoc = { 
      title: Meteor.user().username, 
      status: 0, 
      docId: Random.id(), 
      description: "this is a comment", 
      createdAt: new Date().getTime(), 
      updatedAt: new Date().getTime(), 
      createdBy: userId, 
      updatedBy: userId, 
     }; 

     Comments.insert(commentDoc); 

     withRenderedTemplate(Template.comments, {docId: Random.id()}, el => { 
      const target = $(el); 
      assert.equal(target.find('.' + loadingClassName).length, 0); 
      assert.equal(target.find('.no-comments').length, 0); 
      assert.isAbove(target.find('.comment-entry').length, 0); 
      done(); 
     }); 
    }); 

    //////////////////////////////////////////////////////// 

    it("displays a comment of self different than comments of others", function (done) { 
     assert.fail("not yet implemented"); 
    }) 
}); 

Answer 1

オーケー、私はDOMに掘った後、自分自身を答えを見つけました：

meteor test --driver-package practical meteor:mocha 

テストコードは以下の通りです：

私のテストコマンドは次のようです。

これはまた、非流星のユーザーに興味深いものになることがあります。

モカウェブレポーターはエラー出力用にはもちろん、CSSの上書きに非常に脆弱である.errorと呼ばれるCSSクラス名を使用しています。

私は、通常、このような競合を避けるためにプレフィックス付きのクラス名を使用するので、これは問題ではないと考えました。

しかし、私はとも呼ばれ、またエントリを持つデフォルトのCSSに付属しているエディタでパッケージをインストール：

.error { 
    display: none; 
} 

流星アプリは素晴らしく、私のモカを実行するときにすることを、方法で、すべてのことを同梱エラーフィールドがWebレポーターで非表示になっています。

私はエディタパッケージを削除し、問題は解決しました。

私がこのことから学んだこと：パッケージ内のCSSクラスに共通名を使用しないでください。