web-dev-qa-db-ja.com

Reactコンポーネントに冗談のある別のコンポーネントが含まれているかどうかをテストする方法は？

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
unit-testingtddreactjsjestjs
16
jasonlfunk

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

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

私には疑わしいようです。 docs は、文字列ではなくcomponentClassを渡す必要があることを示唆しているようです。

文字列を使用してコンポーネントタイプを識別する方法がわかりません。 displayNameを使用して文字列で識別する可能性がありますが、そうなるとは思えません。

私はあなたがおそらくこれが欲しいと思います：

var TopBar = require('../../src/js/pages/DesignerPage');
var topbar = TestUtils.scryRenderedComponentsWithType(page, TopBar);
8
Tom

子コンポーネントがレンダリングされているかどうかを確認する必要がある同様の状況に遭遇しました。私が理解している限り、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')

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

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

8
nimgrg