Promise не работает в компоненте реакции при тестировании компонента с помощью шутки

Question

Добрый день. У меня есть следующая проблема: У меня есть редактор элементов. Как это работает: Я нажимаю кнопку «Добавить», заполняю некоторую информацию, нажимаю кнопку «Сохранить». Функция _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:

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

Я вижу только "Я в услуги сейв функции" в моей консоли ,

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

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

Answer 1

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

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> 

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