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