21
  • 反应 v15.1.0
  • 玩笑 v12.1.1
  • 酵素 v2.3.0

我试图弄清楚如何测试在单击调用的函数中调用承诺的组件。我期待 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: 'there is text!' });
    }, 50);
  }

  render() {
    return (
      <div>
        <div id="promiseText">{this.state.promiseText}</div>
        <button id="promiseBtn" onClick={this.setTextWithPromise}>Promise</button>
        <div id="timeoutText">{this.state.timeoutText}</div>
        <button id="timeoutBtn" onClick={this.setTextWithTimeout}>Timeout</button>
      </div>
    );
  }
}

和测试：

import AsyncTest from '../async';
import { shallow } from 'enzyme';
import React from 'react';

jest.unmock('../async');

describe('async-test.js', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = shallow(<AsyncTest />);
  });

  // FAIL
  it('displays the promise text after click of the button', () => {
    wrapper.find('#promiseBtn').simulate('click');

    jest.runAllTicks();
    jest.runAllTimers();

    wrapper.update();

    expect(wrapper.find('#promiseText').text()).toEqual('there is text!');
  });

  // PASS
  it('displays the timeout text after click of the button', () => {
    wrapper.find('#timeoutBtn').simulate('click');

    jest.runAllTimers();

    wrapper.update();

    expect(wrapper.find('#timeoutText').text()).toEqual('there is text!');
  });
});
4

2 回答 2

66

更新的答案：使用async/await导致更清晰的代码。下面的旧代码。

我通过结合以下元素成功地解决了这个问题：

  • 模拟出承诺并立即解决
  • 通过标记测试函数使测试异步async
  • 模拟点击后，等到下一个宏任务给promise时间解决

在您的示例中，可能如下所示：

// Mock the promise we're testing
global.doSomethingWithAPromise = () => Promise.resolve();

// Note that our test is an async function
it('displays the promise text after click of the button', async () => {
    wrapper.find('#promiseBtn').simulate('click');
    await tick();
    expect(wrapper.find('#promiseText').text()).toEqual('there is text!');
});

// Helper function returns a promise that resolves after all other promise mocks,
// even if they are chained like Promise.resolve().then(...)
// Technically: this is designed to resolve on the next macrotask
function tick() {
  return new Promise(resolve => {
    setTimeout(resolve, 0);
  })
}

使用此方法时， Enzyme'supdate()既不够用也不需要，因为 Promise 永远不会在它们创建的同一滴答中解析 - 设计使然。有关这里发生的事情的非常详细的解释，请参阅这个问题。

原始答案：相同的逻辑但稍微不那么漂亮。使用 NodesetImmediate将测试推迟到下一个滴答声，也就是 Promise 将解决的时间。然后调用 Jest'sdone异步完成测试。

global.doSomethingWithAPromise = () => Promise.resolve({});

it('displays the promise text after click of the button', (done) => {
    wrapper.find('#promiseBtn').simulate('click');

  setImmediate( () => {
    expect(wrapper.find('#promiseText').text()).toEqual('there is text!');
    done();
  })
});

这不是很好，因为如果您必须等待多个承诺，您将获得大的嵌套回调。

于 2017-05-08T19:25:45.330 回答
1

在结束测试之前不需要以某种方式等待承诺实现。从你的代码中我可以看到有两种主要的方法。

  1. 独立测试它onClick和你的承诺方法。因此，请检查是否onClick调用了正确的函数，但会监视setTextWithPromise、触发单击并断言setTextWithPromise已调用。然后，您还可以获取组件实例并调用该方法，该方法返回您可以附加处理程序并断言它做了正确的事情的承诺。

  2. 公开一个回调道具，您可以传入该道具，当承诺解决时会调用该道具。

于 2016-05-24T12:11:21.760 回答