用于 ReactJS 测试的 Jest答案

【问题标题】：Jest for ReactJS test用于 ReactJS 测试的 Jest
【发布时间】：2016-10-09 07:02:01
【问题描述】：

我的 React 组件有以下测试

var React = require('react/addons');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var Link = require('react-router').Link;
TestUtils = React.addons.TestUtils;


describe('Navigation', function() {
var Navigation = require('../js/components/Navigation');
jest.dontMock('../js/components/Navigation.js');


 var NavElement = TestUtils.renderIntoDocument(
    <Navigation items={[{ title: 'test' }, { title: 'test' }]} />
  );

  var items = TestUtils.scryRenderedDOMComponentsWithTag(NavElement, 'li');


  it('renders each item as a li', function() {
    expect(items.length).toEqual(2);


  });


});

这是 React 组件

'use strict'
var React = require('react');
var Router = require('react-router').Router;
var Link = require('react-router').Link;
var RouteHandler = require('react-router').RouteHandler;



var Navigation = React.createClass({
    render: function() {
        return (
            <div>
            <header>
            <ul>
            <li><Link to="clusters">Clusters</Link></li>
            <li><Link to="dependencies">Dependencies</Link></li>
            <li><Link to="components">Components</Link></li>
            </ul>
            </header>
            <RouteHandler />
            </div>
            );
        }
    });
    module.exports = Navigation;

但测试失败并出现以下错误

- Expected 0 to equal 2.
        at jasmine.buildExpectationResult (node_modules/jest-jasmine2/src/index.js:80:44)
        at Object.eval (src/main/__tests__/app-test.js:23:26)
        at Object.<anonymous> (node_modules/jest-jasmine2/src/jasmine-pit.js:35:32)
        at jasmine2 (node_modules/jest-jasmine2/src/index.js:253:7)
        at Test.run (node_modules/jest-cli/src/Test.js:44:12)
        at process._tickCallback (node.js:369:9)
1 test failed, 0 tests passed (1 total in 1 test suite, run time 1.518s)

我错过了什么？

【问题讨论】：

标签： node.js unit-testing reactjs jestjs

【解决方案1】：

你在调用jest.dontMock你需要这个模块。您必须在 before 之前加点它，否则您的模块仍将被模拟：您将获得一个不实现任何逻辑的虚拟组件。

另外，虽然这不是您问题的主题，但我认为您的组件并没有按照您的意愿行事。您的组件根本不使用提供的 items 属性。目前，您的组件将始终使用您在其渲染函数中定义的 3 <li> 渲染。我建议你快速浏览一下 react 教程，尤其是 how to use props。

【讨论】：