Как протестировать компонент React с помощью AJAX в componentWillMount - PullRequest
0 голосов
/ 18 октября 2018

У меня есть компонент React, где некоторые данные выбираются по HTTP во время componentWillMount.Это делается почти так же, как объяснено здесь с использованием промежуточного программного обеспечения Redux Thunk .Запрос выполняется с axios .Поэтому изначально устанавливается состояние loading и данные устанавливаются, как только возвращается запрос.

class SomeComponent extends Component {
    //...

    componentWillMount() {
        store.dispatch(fetchInitialData())
    }
    // ...
}

Действие, выполняющее выборку:

export function fetchInitialData() {
    return dispatch => {
        return axios.get('https://our.api')
            .then(res => {
                dispatch(handleSuccess(res.data));
            })
            .catch(error => dispatch(handleError(error)));
    }
}

Тест записанс помощью Jest и Enzyme, а axios осмеивается с помощью axios-mock-adapter .

import Enzyme, { mount } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import configureMockStore from 'redux-mock-store'
import Campaigns from './campaigns'
import axios from 'axios'
import MockAdapter from 'axios-mock-adapter'
import thunk from 'redux-thunk'
import response from 'testdata/api/response.json'

Enzyme.configure({
    adapter: new Adapter()
});

function createMockStore() {
    const mockStore = configureMockStore([thunk]);
    return mockStore({});
}

describe('some component', () => {
    it('should render ...', () => {
        const mock = new MockAdapter(axios);
        mock.onGet('/our.api').reply(200, response);

        const store = createMockStore();

        const enzymeWrapper = mount(<SomeComponent store={store}/>);

        console.log('enzymeWrapper', enzymeWrapper.html());
    });
});

Проблема состоит в том, что HTML-код enzymeWrapper всегда содержит только представление начального состояния.Исходный HTML никогда не изменяется в соответствии с новым состоянием из ответа.Когда я добавляю логирование в редукторы и сервисы, я вижу, что макетированные запросы выполняются, и состояние заполняется фиктивным ответом.Но компонент не выполняет повторную визуализацию с новыми данными состояния.

Я хочу отметить, что это только проблема в тесте.В реальном приложении все работает нормально.

Мне кажется, что мне нужно как-то подождать, пока изменения состояния не будут применены.Но я не знаю как.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...