React mock Graphql subscription - reactjs

Question

I have a react project, which I am testing using Jest. I am trying to mock a call to AWS graphql and in particular, a subscribe. Here is the code I am trying to mock
await API.graphql(
graphqlOperation(subscriptions.addedProduct))
.subscribe({
next: (response) => {
this.setState({ products: [...this.state.products, response.value.data.addedProduct] })
}
});
I usually mock using spyOn with something like this...
const mockProducts = jest.spyOn(API, 'graphql').mockImplementation(async () =>
Promise.resolve(mockResponse)
);
but would get the error
TypeError: _awsAmplify.API.graphql(...).subscribe is not a function
Has anyone got an example of mocking a subscribe in a similar way?

Answer 1

You need to mock the return value of API.graphql as an Observable that come from reactive programming. Then, you can use .subscribe method. Below example, I use the of operator of rxjs to create an Observable.
E.g.
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();
});
});
unit test results with coverage report:
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