使用Jest测试组件时Promise在React组件中不起作用 [英] Promise isn't working in react component when testing component using jest

问题描述

美好的一天.我有以下问题: 我有一个项目编辑器. 工作原理:我按添加"按钮，填写一些信息，然后单击保存"按钮. 我的react组件中的_onSaveClicked函数处理来自服务的click事件和调用函数，该事件将参数从编辑表单发送到服务器并返回promise. _onSaveClicked工具

Good day. I have the following problem: I have an item editor. How it works: I push 'Add' button, fill some information, click 'Save' button. _onSaveClicked function in my react component handles click event and call function from service, which sends params from edit form to server and return promise. _onSaveClicked implements

.then(response => {
    console.log('I\'m in then() block.');
    console.log('response', response.data);
}) 

功能并等待承诺结果.它在实际情况下有效. 我创建了虚假服务，并将其放置在真实服务中. 服务的功能包含:

function and waits for promise result. It works in real situation. I created fake service and placed it instead of real service. Service's function contains:

return Promise.resolve({data: 'test response'});

您可以看到伪造的服务返回了已解决的Promise，.then()块应立即起作用.但是.then()块永远无法工作.

As you can see fake service return resolved promise and .then() block should work immediatly. But .then() block never works.

开玩笑:

jest.autoMockOff();

const React = require('react');
const ReactDOM = require('react-dom');
const TestUtils = require('react-addons-test-utils');
const expect = require('expect');
const TestService = require('./service/TestService ').default;


let testService = new TestService ();

describe('TestComponent', () => {
  it('correct test component', () => {
    //... some initial code here
    let saveButton = TestUtils.findRenderedDOMComponentWithClass(editForm, 'btn-primary');
    TestUtils.Simulate.click(saveButton);
    // here I should see response in my console, but I don't
  });
});

反应元件保存功能:

 _onSaveClicked = (data) => {
    this.context.testService.saveData(data)
      .then(response => {
        console.log('I\'m in then() block.');
        console.log('response', response.data);
      });
  };

服务:

export default class TestService {
  saveData = (data) => {
    console.log('I\'m in services saveData function');
    return Promise.resolve({data: data});
  };
}

在控制台中，我仅看到我在服务saveData函数中".

I see only "I'm in services saveData function" in my console.

如何使其起作用?我需要模仿服务器的响应.

How to make it works? I need to immitate server response.

谢谢您的时间.

推荐答案

您可以将测试组件包装在另一个组件中，例如:

You can wrap your testing component in another one like:

class ContextInitContainer extends React.Component {

  static childContextTypes = {
    testService: React.PropTypes.object
  };

  getChildContext = () => {
    return {
      testService: {
        saveData: (data) => {
          return {
            then: function(callback) {
              return callback({
                // here should be your response body object
              })
            }
          }
        }
      }
    };
  };

  render() {
    return this.props.children;
  }
}

然后:

<ContextInitContainer>
  <YourTestingComponent />
</ContextInitContainer>

所以您的诺言将立即执行.

So your promise will be executed immediately.

这篇关于使用Jest测试组件时Promise在React组件中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！