如何使用玩笑测试 React 类中渲染以外的功能?

IT技术 reactjs jestjs
2021-04-28 18:07:39

我正在尝试TDDReact我正在构建应用程序做一些事情使用jest我能够测试我的渲染功能,看看我是否得到了我期望得到的渲染。如果我想测试class中的其他一些功能怎么办?我该如何掌握它?例如,这是一个React类:

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>
        );
    }
});

我想抓住我的daysdaysFromNextMonth函数,看看它们是否返回了我所期望的。我试图jest掌握这样的功能:

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

error说我没办法daysFromNextMonth我该如何解决?

3个回答

您需要渲染您的组件以引用其上的方法(类似于在使用实例方法之前实例化一个类):

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

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

使用酶,我找到了测试组件功能的参考, https://github.com/airbnb/enzyme/issues/208

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

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

结合jestenzyme应该可以解决问题。查看jest DOM 测试文档和

基本思想是您可以使用enzyme浅渲染组件并操纵它们。