模拟点击时使用React的Jest和Enzyme进行测试会调用一个调用promise的函数 [英] Testing with React's Jest and Enzyme when simulated clicks call a function that calls a promise

问题描述

• 反应v15.1.0
• 笑话v12.1.1
• 酶v2.3.0

我正在尝试找出如何测试通过单击调用的函数中调用promise的组件.我期望Jest的runAllTicks()函数可以在这里为我提供帮助，但是它似乎没有执行诺言.

I'm trying to figure out how to test a component that calls a promise in a function invoked by a click. I was expecting Jest's runAllTicks() function to help me out here, but it doesn't seem to be executing the promise.

组件:

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

推荐答案

在结束测试之前，并不需要太多的时间等待诺言兑现.从您可以看到的代码中，有两种主要的实现方法.

There isn't much around needing to somehow wait for the promise to fulfill before ending the test. There are two main ways of doing it from your code that I can see.

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

1. independently test that onClick and your promise methods. So check that onClick calls the correct function, but spying on setTextWithPromise, triggering a click and asserting that setTextWithPromise was called. Then you can also get the component instance and call that method which returns the promise you can attach a handler and assert it did the right thing.

公开一个可以传递的回调道具，当诺言解决时会调用该道具.

expose a callback prop that you can pass in that is called when the promise resolves.

这篇关于模拟点击时使用React的Jest和Enzyme进行测试会调用一个调用promise的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！