相关疑难解决方法(0)

我正在为React应用程序编写集成测试,即一个测试多个组件的测试,我想模拟对外部服务的任何调用.

问题是测试似乎在执行异步回调之前执行,导致我的测试失败.

有没有办法解决？我可以以某种方式等待调用异步代码完成？

这是一些不好的伪代码来说明我的观点.

我想测试当我挂载Parent时,它的Child组件呈现从外部服务返回的内容,我将模拟.

class Parent extends component
{
     render ()
     {
         <div>
            <Child />
         </div>
     }
}
class Child extends component
{
     DoStuff()
     {
         aThingThatReturnsAPromise().then((result) => {
           Store.Result = result
         })
     }

    render()
    {
       DoStuff()
       return(<div>{Store.Result}</div>)


    }
}
function aThingThatReturnsAPromise()
{
     return new Promise(resolve =>{
          eternalService.doSomething(function callback(result) {
               resolve(result)
          }
    }

}

当我在测试中执行此操作时,它会失败,因为它会在回调被触发之前执行.

jest.mock('eternalService', () => {
    return jest.fn(() => {
        return { doSomething: jest.fn((cb) => cb('fakeReturnValue');
    });
});

describe('When rendering Parent', () => {
    var …

• React v15.1.0
• Jest v12.1.1
• 酶v2.3.0

我正在试图弄清楚如何测试一个在单击调用的函数中调用promise的组件.我期待Jest的runAllTicks()功能可以帮助我,但它似乎没有执行承诺.

零件:

import React from 'react';
import Promise from 'bluebird';

function doSomethingWithAPromise() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, 50);
  });
}

export default class AsyncTest extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      promiseText: '',
      timeoutText: ''
    };

    this.setTextWithPromise = this.setTextWithPromise.bind(this);
    this.setTextWithTimeout = this.setTextWithTimeout.bind(this);
  }

  setTextWithPromise() {
    return doSomethingWithAPromise()
      .then(() => {
        this.setState({ promiseText: 'there is text!' });
      });
  }

  setTextWithTimeout() {
    setTimeout(() => {
      this.setState({ timeoutText: …