Обещание не работает в компоненте реакции при тестировании компонента с использованием шутки

Добрый день. У меня следующая проблема: у меня есть редактор элементов. Как это работает: я нажимаю кнопку «Добавить», заполняю информацию, нажимаю кнопку «Сохранить». Функция _onSaveClicked в моем реагирующем компоненте обрабатывает событие щелчка и функцию вызова из службы, которая отправляет параметры из формы редактирования на сервер и возвращает обещание. _onSaveClicked реализует

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

функцию и ждет обещанного результата. Работает в реальной ситуации. Я создал поддельный сервис и разместил его вместо настоящего сервиса. Функционал службы содержит:

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

Как вы можете видеть, поддельный сервис возвращает обещание, и блок .then() должен работать немедленно. Но блок .then() никогда не работает.

Шуточный тест:

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

Функция сохранения компонента React:

 _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".

Как заставить это работать? Мне нужно имитировать ответ сервера.

Спасибо за ваше время.


reactjs testing jestjs promise
person Nikolai Kovalenko    schedule 12.04.2016    source источник
comment
Вы нашли какое-то решение проблемы. Я испытываю ту же проблему.   -  person Krasimir    schedule 18.05.2016
comment
Нет. Я высмеивал методы, использующие Promises.   -  person Nikolai Kovalenko    schedule 23.05.2016

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете обернуть свой тестовый компонент в другой, например:

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>

Так что ваше обещание будет выполнено немедленно.

person Dmitriy    schedule 30.10.2016