17

jest-cli を使用して、ある反応コンポーネントの出力に別のコンポーネントが含まれているかどうかをテストしようとしています。これを行う方法がわからなくて困っています。

ここに私のコンポーネントがあります：

DesignerPage コンポーネント

[...]
var TopBar = require('../components/layout/TopBar.js');

var DesignerPage = React.createClass({
  getInitialState: function() {
    var state = {
    };
    return state;
  },
  render: function() {
    return (
      <div> 
        <TopBar />
      </div>
    )
  }
});

module.exports = DesignerPage;

TopBar コンポーネント

/** @jsx React.DOM */
var React = require("react");

var TopBar = React.createClass({
    render: function() {
        return (
            <nav className="top-bar">
            </nav>
        );
    }
});

module.exports = TopBar;

次に、DesignerPage コンポーネントに TopBar コンポーネントが含まれているかどうかをテストします。これが私がうまくいくと思うものです：

/** @jsx React.DOM */
jest.dontMock('../../src/js/pages/DesignerPage.js');
describe('DesignerPage', function() {
  it('should contain a TopBar', function() {
    var React = require('react/addons');
    var DesignerPage = require('../../src/js/pages/DesignerPage.js');
    var TestUtils = React.addons.TestUtils;

    // Render a DesignerPage into the document
    var page = TestUtils.renderIntoDocument(
      <DesignerPage />
    );

    // Verify that a TopBar is included
    var topbar = TestUtils.scryRenderedComponentsWithType(page, 'TopBar');
    expect(topbar.length).toBe(1);
  });
});

しかし、それは通過しません... :(

$ ./node_modules/jest-cli/bin/jest.js DesignerPage
Found 1 matching test...
 FAIL  __tests__/pages/DesignerPage-test.js (4.175s)
● DesignerPage › it should contain a TopBar
  - Expected: 0 toBe: 1
        at Spec.<anonymous> (__tests__/pages/DesignerPage-test.js:16:27)
        at Timer.listOnTimeout [as ontimeout] (timers.js:112:15)
1 test failed, 0 test passed (1 total)
Run time: 6.462s
4

2 に答える 2

8

子コンポーネントがレンダリングされているかどうかを確認する必要がある同様の状況に遭遇しました。私が理解している限り、 jest は、指定しないモジュールを除いて、必要なすべてのモジュールをモックします。したがって、あなたの場合、子コンポーネントのTopbarがモックされ、レンダリングされた DOM が期待どおりにならないことが推測されます。

子コンポーネントがレンダリングされたかどうかの確認については、

expect(require('../../src/js/component/layout/TopBar.js').mock.calls.length).toBe(1)

基本的に、モックされた子コンポーネントが呼び出されたかどうかをチェックします。

このレベルでTopBarコンポーネントの出力を本当にテストしたい場合は、おそらく設定したいでしょう

jest.dontMock('../../src/js/component/layout/TopBar.js')

同様に、レンダリングされたDOMにTopBarコンポーネントからの出力も含まれるように、 jestにTopBarコンポーネントをモックしないように指示します。

子コンポーネントをテストするGithubの例に基づいてレポを作成しました。2 つのテスト ファイルがあり、1 つはモックされた子コンポーネントをテストし、もう 1 つは子コンポーネントをモックしていません。

于 2014-10-22T04:55:54.450 に答える
8

問題のコードは実行していませんが、次の行を実行しています。

var topbar = TestUtils.scryRenderedComponentsWithType(page, 'TopBar');

私には疑わしいように見えます。ドキュメントはcomponentClass、文字列ではなく aを渡す必要があることを示唆しているようです。

文字列を使用してコンポーネントの種類を特定する方法がわかりません。を使用して文字列で識別する可能性がありますが、それができるdisplayNameとは思えません。

おそらくこれが必要だと思います：

var TopBar = require('../../src/js/pages/DesignerPage');
var topbar = TestUtils.scryRenderedComponentsWithType(page, TopBar);
于 2014-10-20T20:57:47.803 に答える