Skip to main content

how to do integration test - react app - Cypress (e to e)

Many integration tests. No snapshot tests. Few unit tests. Few e to e tests.

Integration tests should mock as little as possible

Mount/render is typically used for integration testing and shallow is used for unit testing.

shallow rendering only renders the single component we are testing. It does not render child components. This allows us to test our component in isolation.

unit vs integration vs end to end

unit testing: testing an isolated part of your app, usually done in combination with shallow rendering. example: a component renders with the default props.

integration testing: testing if different parts work or integrate with each other. Usually done with mounting or rendering a component. example: test if a child component can update context state in a parent.

e to e testing: Stands for end to end. Usually a multi step test combining multiple unit and integration tests into one big test. Usually very little is mocked or stubbed. Tests are done in a simulated browser, there may or may not be a UI while the test is running. example: testing an entire authentication flow.

Enzyme Setup

Our third party libraries

npm install enzyme enzyme-to-json  enzyme-adapter-react-16

Lets first start with our imports

import React from 'react'; import ReactDOM from 'react-dom';import Basic from '../basic_test';import Enzyme, { shallow, render, mount } from 'enzyme';import toJson from 'enzyme-to-json';import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() })
react testing library:
test reducer:
it('reducer changes state:fetchingStripeClient from false to true', () => {
const { container, getByTestId, getByText } = renderComponent()
const newState = reducer(initialState, {
type: 'fetchStripeClient',
payload: {
cardHolderName: 'test',
billingZipcode: 'test',


mock mutation:
const mocks = [
request: {
variables: {
orderInput: {
listingId: '67igupBKVvZVtLUba9VVFA',
coupon: { couponCode: 'package: FULL SERVICE-F2GlKFWw28dqvQGc0PcG' },
orderItems: [
productId: 'prod_HJy2x5wjZTRH5X',
quantity: 8,
skuId: 'sku_HJy2b51LIDNhYY',
price: 10,
deposit: 30,
discount: 0,
productId: 'prod_HJy0HyCnEOBf66',
quantity: 1,
skuId: 'sku_HJy056bCRiGPQ9',
price: 20,
deposit: 70,
discount: 0,
productId: 'prod_HJxx41rSAm7ATN',
quantity: 1,
skuId: 'sku_HJxxYHGHQZ0zFe',
price: 199,
deposit: 0,
discount: 0,
notes: '',
orderStatus: 'PENDING',
paymentIntentId: 'h',
subTotal: 0,
tax: 0,
total: 0,
discount: 0,
totalOfOrder: 0,
shippingTo: '',
shippingAddress: { address: '', city: '', state: '', zipcode: '' },
cardHolderName: '',
billingZipcode: '',
result: {
data: {
createStripeOrder: {
id: 'new orderId',
listingId: listingId,
orderNumber: 'new order#',

return render(
<MockedProvider mocks={mocks} addTypename={false}>
<Elements stripe={stripePromise}>


Popular posts from this blog

About GraphQL - Downside

Web caching complexity

File uploading. Since GraphQL doesn’t understand files, a file uploading feature is not included in its specification. You won’t have to deal with this limitation in case of REST, as there you can POST or PUT whatever content you want to.
To allow file uploads in your GraphQL web app, there are several options: using Base64 encoding. But it will make the request larger and expensive to encode/decode.making a separate API endpoint just for this purpose.using a library like Apollo for implementing the GraphQL multipart request specification.uploadFileToS3:combineResolvers( // isAuthenticated, async (parent, args, { models }) => { const { file } = awaitargs const { createReadStream, filename, mimetype, encoding } = awaitfile conststream = createReadStream() constresult = awaituploadFileToS3(filename, stream) returnresult } ),