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

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

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

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

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

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

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

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


javascript jestjs rxjs rxjs6
person SinSync    schedule 28.09.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

Чтобы протестировать асинхронные методы, вы можете имитировать свои данные и таймеры в 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 (можно выполнить с помощью, например, TestCafe)

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

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

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

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

person azrahel    schedule 28.09.2018
comment
Спасибо, что нашли время и ссылки, я пройдусь по ним и вернусь! :) - person SinSync; 28.09.2018
comment
Дело в том, что с этими методами кажется, что я тестирую другую реализацию, я хочу протестировать метод внутри своего контейнера, для чего мне нужно смоделировать ответ наблюдаемого ajax.get и проверить, вызывает ли мой контейнер также вызов. - person SinSync; 28.09.2018
comment
1. API, который вы вызываете в своем компоненте, должен быть внешним по отношению к компоненту и вызываться из этого внешнего источника (другой файл, другой класс, как бы вы его ни проектировали), чтобы вы могли заменить его в тесте. 2. Весь API должен быть модульным, поэтому вы можете взять один модуль и протестировать его, не инициализируя весь API только для этого случая. 3. Если вы проектируете свое приложение таким образом, вы можете инициализировать часть API с помощью фиктивных данных, а затем визуализировать свой компонент в тесте, и поскольку он будет вызывать фиктивный API, вы можете проверить, отображает ли он то, что вы ожидаете. - person azrahel; 29.09.2018
comment
@SinSync прошло 2 года, но можете ли вы отметить это как ответ, если это вам помогло :)? Спасибо - person azrahel; 26.04.2021