Question

在这种情况下，我模拟 getArticlesFromDatabase 并让promise解析fakeData。

控制台成功： setState articleGroup recive数据，但控制台：获取状态不显示任何内容。

当 setArticleGroup setState？

时，如何在 navList.test.js 中获取状态？

navList.js

setArticleGroup(){
    let that = this;

    getArticlesFromDatabase().then(function(value) {
        let sieveDataFromProps = _.filter(value, { 'type': that.props.sieve });
        let articleGroup = _.sortBy(sieveDataFromProps, ['updated_at']);

        that.setState({'articleGroup':articleGroup},function(){
            console.log('setState articleGroup:   ',articleGroup);
        });
    });

}

navList.test.js

it.only('function setArticleGroup() ', function () {

        let csrfData = require('../components/common/csrfData');
        let fakeData = [
            {article:"",created_at:"2018-01-11 07:30:11",id:19,status:"hide",title:"cute panda",type:"info",updated_at:"2018-01-33 08:34:33"},
            {article:"",created_at:"2018-01-11 07:30:11",id:19,status:"hide",title:"cute panda",type:"info",updated_at:"2018-01-22 08:34:22"},
            {article:"",created_at:"2018-01-11 07:30:11",id:19,status:"hide",title:"cute panda",type:"",updated_at:"2018-01-00 08:34:33"},
            {article:"",created_at:"2018-01-11 07:30:11",id:19,status:"hide",title:"cute panda",type:"info",updated_at:"2018-01-11 08:34:11"}
        ];

        csrfData.getArticlesFromDatabase = jest.fn().mockReturnValue(Promise.resolve(fakeData));

        let app = shallow(<NavList sieve="info" />);
        app.instance().setArticleGroup();

        console.log('get state:     ',app.state().articleGroup);

});

Answer 1

您需要在setArticleGroup()函数中返回一个承诺，因为在内部您对getArticlesFromDatabase()进行了异步调用。然后在测试用例中，您需要等到setArticleGroup()函数完成。我不确定您使用的测试框架。如果是Jest，那么你可以阅读更多关于asnyc测试的here。

<强> navList.js

setArticleGroup(){
    let that = this;

    return new Promise(function(resolve, reject) {
        getArticlesFromDatabase().then(function(value) {
            let sieveDataFromProps = _.filter(value, { 'type': that.props.sieve });
            let articleGroup = _.sortBy(sieveDataFromProps, ['updated_at']);

            that.setState({'articleGroup':articleGroup},function(){
                console.log('setState articleGroup:   ',articleGroup);
                // put resolve where you function finish
                resolve();
            });
            // you should use reject() for all cases when your function fail
        });
    });

}

<强> navList.test.js

it.only('function setArticleGroup() ', function (done) {

        let csrfData = require('../components/common/csrfData');
        let fakeData = [
            {article:"",created_at:"2018-01-11 07:30:11",id:19,status:"hide",title:"cute panda",type:"info",updated_at:"2018-01-33 08:34:33"},
            {article:"",created_at:"2018-01-11 07:30:11",id:19,status:"hide",title:"cute panda",type:"info",updated_at:"2018-01-22 08:34:22"},
            {article:"",created_at:"2018-01-11 07:30:11",id:19,status:"hide",title:"cute panda",type:"",updated_at:"2018-01-00 08:34:33"},
            {article:"",created_at:"2018-01-11 07:30:11",id:19,status:"hide",title:"cute panda",type:"info",updated_at:"2018-01-11 08:34:11"}
        ];

        csrfData.getArticlesFromDatabase = jest.fn().mockReturnValue(Promise.resolve(fakeData));

        let app = shallow(<NavList sieve="info" />);
        app.instance().setArticleGroup().then(function() {
            console.log('get state:     ',app.state().articleGroup);
            done();
        }).catch(function() {
            // make your test fail
        });
});

Answer 2

我发现我可以使用 async / await 来解决此问题。我只需要做，等待 setArticleGroup（）完成。

在 setArticleGroup（）中添加承诺也可以做到这一点，但 async / await 可以解决问题而无需添加新的许

it('function setArticleGroup() ', async function () { let csrfData = require('../components/common/csrfData'); let fakeData = [ {article:"",created_at:"2018-01-11 07:30:11",id:19,status:"hide",title:"cute panda",type:"info",updated_at:"2018-01-33 08:34:33"}, {article:"",created_at:"2018-01-11 07:30:11",id:19,status:"hide",title:"cute panda",type:"info",updated_at:"2018-01-22 08:34:22"}, {article:"",created_at:"2018-01-11 07:30:11",id:19,status:"hide",title:"cute panda",type:"",updated_at:"2018-01-00 08:34:33"}, {article:"",created_at:"2018-01-11 07:30:11",id:19,status:"hide",title:"cute panda",type:"info",updated_at:"2018-01-11 08:34:11"} ]; csrfData.getArticlesFromDatabase = jest.fn().mockReturnValue(Promise.resolve(fakeData)); let app = shallow(<NavList sieve="info" />); await app.instance().setArticleGroup(); const lengthOfSieveFakeData = 3; expect(app.state().articleGroup.length).to.equal(lengthOfSieveFakeData); });

单元测试：如何在承诺解决后获得状态？

2 个答案: