如何使用 jest 在 React class 中测试渲染以外的功能？

Question

我正尝试在我正在构建的 React 应用程序上做一些 TDD。使用 jest 我可以测试我的渲染函数，看看我是否得到了我期望的渲染结果。如果我想测试 class 中的其他功能怎么办？我如何掌握它？例如，这里有一个 React class:

var moment = require('moment');
var React = require('react');
var utils = require('./utils');

module.exports = React.createClass({
    days: function() {
        var days = [];
        var nextMonth = this.daysFromNextMonth(days, numberOfDays);
        return days;
    },
    daysFromNextMonth: function(days, numberOfDays) {
        ...
    },
    render: function() {
        var that = this;
        var days = this.days().map(function(day, i) {
            return <li key={day}>{day}</li>
        return (
            <ul className='monthly-view'>
                {days}
            </ul>
        );
    }
});

我想抓住我的 days 或 daysFromNextMonth 函数，看看它们是否返回我所期望的。我尝试在 jest 中获取这样的函数：

it('should show an render', function() {
    var result = DailyView.daysFromNextMonth(day, 10)
    ....
});

我的error说我没有办法daysFromNextMonth。我该如何解决这个问题？

Answer 1

您需要渲染组件以引用其上的方法（类似于在使用实例方法之前实例化 class）：

var view = TestUtils.renderIntoDocument(<DailyView />)
var result = view.daysFromNextMonth(day, 10)

然后您可以调用任何实例方法。

Answer 2

jest 和 enzyme 的组合应该可以解决问题。查看 jest DOM testing documentation and enzyme.

基本思路是您可以使用 enzyme 浅层渲染组件并对其进行操作。

Answer 3

使用酶我发现了这个参考测试组件的功能， https://github.com/airbnb/enzyme/issues/208.

const component = shallow(<MyComponent />);
component.instance().foo();

您必须先获取组件的实例才能调用其方法，但这对我有用。

如何使用 jest 在 React class 中测试渲染以外的功能？

How to test functions other than render in a React class using jest?

reactjs

jestjs