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

setup git account on mac with ssh - push to remote denied with other login

http://burnedpixel.com/blog/setting-up-git-and-github-on-your-mac/#generatenewkey “ SSH  uses public-key cryptography to authenticate the remote computer and allow it to authenticate the user, if necessary. There are several ways to use SSH; one is to use automatically generated public-private key pairs to simply encrypt a network connection, and then use password authentication to log on.” An SSH key basically lets your computer uniquely identify itself when it connects to servers. If Github is aware of the key your computer is using, you won’t have to enter your Github username/password every time you connect. Check for pre-existing SSH keys on your computer Let’s see if your computer has one or more keys already installed: 1 2 # Point the terminal to the directory that would contain SSH keys for your user account. $ cd ~/.ssh If you get the response “No such file or directory”, skip to  Generate a new SSH Key . Otherwise, you’ll need to backup...
Post a Comment
Read more

fs.writeFile - permission issue on GCP (Google Cloud Run)

error on this: fs . writeFile ( fileName , pdfBytes , err => { if ( err ) { console . log ( err . message ) reject ( err . message ) } else resolve ( fileName ) }) #1 It looks like when deployed into Cloud Run it also requires the extra permission "Service Account Token Creator" to run  getSignedUrl . Locally for some reason this role is not required. #2 Only the directory  /tmp  is writable in Cloud Run. So, change the default write location to write into this directory. However, you have to be aware of 2 things: Cloud Run is stateless, that means when a new instance is created, the container start from scratch, with an empty  /tmp  directory /tmp  directory is an in-memory file system. The maximum allowed memory on Cloud Run is 2Gb, your app memory footprint included. In addition of your file and Airflow, not sure that you will have a lot of space. A final remark. Cloud Run is active only when it...
Post a Comment
Read more