Реактивная макетная подписка Graphql - PullRequest
Новая
       82

Реактивная макетная подписка Graphql

0 голосов
/ 27 апреля 2020

У меня есть реактивный проект, который я тестирую с помощью Jest. Я пытаюсь издать вызов AWS graphql и, в частности, подписаться. Вот код, который я пытаюсь смутить 

await API.graphql(
    graphqlOperation(subscriptions.addedProduct))
    .subscribe({
      next: (response) => {
        this.setState({ products: [...this.state.products, response.value.data.addedProduct] })
      }
    });

Я обычно издеваюсь, используя spyOn с чем-то вроде этого ... 

const mockProducts = jest.spyOn(API, 'graphql').mockImplementation(async () =>
  Promise.resolve(mockResponse)
);

, но получаю ошибку

TypeError: _awsAmplify.API.graphql (...). Подписка не является функцией

Кто-нибудь получил пример насмешки подписки подобным образом?

1 Ответ

1 голос
/ 28 апреля 2020

Вам необходимо смоделировать возвращаемое значение API.graphql как Observable, полученное в результате реактивного программирования. Затем вы можете использовать .subscribe метод. Ниже приведен пример использования of оператора rxjs для создания Observable.

Например:

main.jsx: 

import React, { Component } from 'react';
import { API } from './api';

export class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [],
    };
  }
  async componentDidMount() {
    await API.graphql('graphqlOperation(subscriptions.addedProduct)').subscribe({
      next: (response) => {
        this.setState({ products: [...this.state.products, response.value.data.addedProduct] });
      },
    });
  }

  render() {
    return <div>my component</div>;
  }
}

main.test.js : 

import { MyComponent } from './main';
import { API } from './api';
import { of } from 'rxjs';

describe('61454572', () => {
  it('should pass', async () => {
    const mockResponse = { value: { data: { addedProduct: 'fake product' } } };
    const graphqlSpy = jest.spyOn(API, 'graphql').mockImplementation(() => {
      return of(mockResponse);
    });
    const wrapper = shallow(<MyComponent></MyComponent>);
    expect(wrapper.state('products')).toEqual(['fake product']);
    expect(graphqlSpy).toBeCalledWith('graphqlOperation(subscriptions.addedProduct)');
    graphqlSpy.mockRestore();
  });
});

Результаты модульных испытаний с отчетом о покрытии: 

 PASS  stackoverflow/61454572/main.test.jsx (11.328s)
  61454572
    ✓ should pass (12ms)

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |   88.24 |      100 |   83.33 |   86.67 |                   
 api.js   |      50 |      100 |       0 |      50 | 5-6               
 main.jsx |     100 |      100 |     100 |     100 |                   
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        13.119s
...