Как проверить, содержит ли компонент 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

reactjs unit-testing jestjs tdd
person jasonlfunk    schedule 10.10.2014    source источник
comment
Я не использовал JEST, но не вижу здесь очевидных проблем. Судя по документации, похоже, что вы все делаете правильно. Просто подумал, что упомяну об этом, поскольку у вас не так много трафика.   -  person Mike Driver    schedule 12.10.2014

Ответы (2)


arrow_upward
8
arrow_downward

Я запускал не рассматриваемый код, а строку:

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

мне кажется подозрительным. В docs, похоже, предлагается передавать componentClass, а не строку.

Я не понимаю, как можно использовать строку для определения типа компонента. Потенциально он мог бы использовать displayName, чтобы идентифицировать его по строке, но я сомневаюсь, что он сможет это сделать.

Я думаю, вы, вероятно, захотите этого:

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

arrow_upward
8
arrow_downward

Я столкнулся с подобной ситуацией, когда мне нужно было проверить, рендерится ли дочерний компонент или нет. Насколько я понимаю, шутка издевается над всеми необходимыми модулями, кроме того, который вы не указали. Таким образом, в вашем случае дочерний компонент 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 для проверки дочерних компонентов. Есть два тестовых файла, один проверяет дочерние компоненты, которые имитируются, а другой не имитирует дочерний компонент.

person nimgrg    schedule 22.10.2014