React 模拟 Graphql 订阅答案

【问题标题】：React mock Graphql subscriptionReact 模拟 Graphql 订阅
【发布时间】：2020-08-10 18:05:25
【问题描述】：

我有一个反应项目，我正在使用 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(...).subscribe 不是函数

有没有人以类似方式模拟订阅的示例？

【问题讨论】：

标签： reactjs unit-testing graphql jestjs graphql-subscriptions

【解决方案1】：

您需要将API.graphql 的返回值模拟为来自反应式编程的Observable。然后，您可以使用.subscribe 方法。下面的例子，我使用rxjs的of操作符来创建一个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

【讨论】：