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',
},
})
console.log(newState)

expect(newState.fetchingStripeClient).toEqual(true)
expect(newState.loading).toEqual(true)
})

 
mock mutation:
const mocks = [
{
request: {
query: ADD_STRIPE_ORDER,
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}>
<CartProvider>
<Elements stripe={stripePromise}>
<Payment
listingId={listingId}
currentPackage={currentPackage}
handleBack={handleBack}
handleNext={handleSubmit}
/>
</Elements>
</CartProvider>
</MockedProvider>
)


Comments

Post a Comment

Popular posts from this blog

for loop in javascript - promise - .eslintrc for "for of"

the vast majority of cases  map ,  forEach ,  find  etc. can be used.  async function printFiles () { const files = await getFilePaths(); await Promise.all(files. map (async (file) => { const contents = await fs.readFile(file, 'utf8') console.log(contents) })); } const inventory = [ { name : 'apples' , quantity : 2 } , { name : 'bananas' , quantity : 0 } , { name : 'cherries' , quantity : 5 } ] ; const result = inventory . find ( ( { name } ) => name === 'cherries' ) ;   function getFirstMatching(array) { for (let item of array) { const result = heavyTransform(item); if (result) { return result; } } } Specifically this shuts down the whole no-restricted-syntax. If you want to cherry-pick, here is the current definition: 'no-restricted-syntax' : [ 'error' , { selector : 'ForInStatement' , message...
Post a Comment
Read more

Apollo client - cache APIs - auto update cache - erase cache - reactive variables - deletion - addition

Apollo Client 3  Local only fields Reactive Variables const cache = new InMemoryCache ( { typePolicies : { Todo : { // If one of the keyFields is an object with fields of its own, you can // include those nested keyFields by using a nested array of strings: keyFields : [ "date" , "user" , [ "email" ] ] , } } , } ) ; This internal data is intended to be easily  JSON-serializable , so you can take a snapshot with  cache.extract() , save it somewhere, and later restore with  cache.restore(snapshot) . Here’s a mutation called  EditTodo  that returns the new  todo  value in the mutation response. mutation EditTodo ( $id : Int ! , $text : String ! ) { editTodo ( id : $id , text : $text ) { success todo { # <- Returning it here id text completed } error { ... on TodoNotFoundError { message } ... on TodoValidationE...
Post a Comment
Read more

window.URL.createObjectURL is not (yet) available in jest-dom - testing scenario

Since  window.URL.createObjectURL  is not (yet) available in jest-dom, you need to provide a mock implementation for it. Don't forget to reset the mock implementation after each test. describe ( "your test suite" , () => { window . URL . createObjectURL = jest . fn (); afterEach (() => { window . URL . createObjectURL . mockReset (); }); it ( "your test case" , () => { expect ( true ). toBeTruthy (); }); });
Post a Comment
Read more