Как проверить вызов rxjs ajax с помощью jest? - PullRequest
Новая
       10

Как проверить вызов rxjs ajax с помощью jest?

0 голосов
/ 28 сентября 2018

У меня есть компонент контейнера, из которого я извлекаю данные с помощью оператора ajax из rxjs

const data = ajax(someUrl).pipe(map(r => r.response));

И в моем компоненте DiskMount у меня есть 

data.subscribe((data) => {
    this.setState({ data });
});

//test.js 

import React from 'react';
import { mount } from 'enzyme';
import { ajax } from 'rxjs/ajax'
import App from '../src/App';

describe('<App />', () => {
  const wrap = mount(<App />);
  const data = [{ 1: 'a' }];
  const mock = ajax('http://url.com').pipe(map(() => data));
  it('renders', () => {
    console.log(mock.subscribe(x => x));
    expect(wrap.find(App).exists()).toBe(true);
  });
});

Как мне смоделировать ответ, чтобы при запуске теста я мог передать эти данные другим компонентам и проверить, отображаются ли они?

Всепримеры тестирования, которые я обнаружил, были редукс-наблюдаемыми, которые я не использую.

Большое спасибо!

1 Ответ

0 голосов
/ 28 сентября 2018

Сначала вам нужно понять, что вы должны тестировать по одной вещи за раз .Это означает, что тестирование выполнения вашего асинхронного метода должно быть отделено от тестирования ваших компонентов, отображающих правильный контент.

Для тестирования асинхронных методов вы можете смоделировать ваши данные, а затем смоделировать таймеры в Jest.

https://jestjs.io/docs/en/tutorial-async

https://jestjs.io/docs/en/asynchronous

https://jestjs.io/docs/en/timer-mocks.html

с jest.useFakeTimers() и методами, упомянутыми выше.

Для тестирования правильного рендеринга компонентов используйте тестирование jest snapshots и e2e (может быть выполнено с помощью ex. TestCafe )

Для соединения этих подходов вам необходимо разработать приложениетаким образом, который позволит вам:

  1. API, который вы вызываете в своем компоненте, должен быть внешним для компонента и вызываться из этого внешнего источника (другой файл, другой класс, однако выдизайн), так что вы можете заменить его в тесте.

  2. Весь API должен быть модульным, поэтому вы можете взять один модуль и протестировать его без инициализации всего API только для этого случая.

  3. Если вы разрабатываете свое приложение таким образом, вы можете инициализировать часть API с помощью фиктивных данных, а затем визуализировать ваш компонент в тесте и, как он будет вызывать симулированный API, вы можете проверить,это делает то, что вы ожидаете.

...