28 | {orders.map((order) => (
29 |
32 | );
33 | };
34 | ```
35 |
36 | To test this component, we could mock the `useOrdersQuery` hook and artificially
37 | provide some orders to display inside the component. Instead, we decided to
38 | leave all the application code intact and let the component make a real HTTP
39 | call from the test. We then intercept this call at the network level using Mock
40 | Service Worker and return some test data in the response.
41 |
42 | To intercept HTTP calls, you provide a file called
43 | [handlers.ts](../src/mocks/handlers.ts) in your project. Each request that you
44 | want to intercept should have an associated handler. Here's the
45 | [handler](../src/mocks/handlers.ts#L25-L27) that intercepts `GET /orders` and
46 | returns some orders in response:
47 |
48 | ```ts
49 | rest.get(`${MOCK_API_URL}/orders`, (req, res, ctx) => {
50 | return res(ctx.status(200), ctx.json(mockOrders));
51 | });
52 | ```
53 |
54 | Finally, here's the test for the `OrdersPage`. Look how simple it is - no
55 | mocking whatsoever!
56 |
57 | ```tsx
58 | test('renders correctly', async () => {
59 | render(
74 | ...
75 |
76 | );
77 | };
78 | ```
79 |
80 | In this situation, we cannot mock the event handler because it is internal to
81 | the component. However, we know that it calls CartService, which is an ES6
82 | module.
83 |
84 | ### Solution 1: Use jest.mock to mock the entire CartService module
85 |
86 | Instead of mocking the event handler, we can mock the entire CartService module.
87 | This can be done using
88 | [jest.mock](https://jestjs.io/docs/jest-object#jestmockmodulename-factory-options)
89 | and then test that it's `addProduct()` method is being called. Here's the
90 | [test](../src/components/ProductView/ProductViewStandalone.test.tsx):
91 |
92 | ```tsx
93 | // import CartService module so that we can mock it
94 | import { CartService } from '../../services';
95 |
96 | // automock the entire CartService module
97 | jest.mock('../../services/CartService');
98 |
99 | test('when clicked, calls addProduct with productId', async () => {
100 | render(HomePageMock
);
13 |
14 | // Act
15 | render(NotFoundMock
25 | ));
26 |
27 | // Act
28 | render(
55 |
62 | );
63 | };
64 | AddressFormStory.storyName = 'AddressForm';
65 |
--------------------------------------------------------------------------------
/src/components/AddressForm/AddressForm.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { yupResolver } from '@hookform/resolvers/yup';
3 | import { FormProvider, useForm } from 'react-hook-form';
4 | import * as yup from 'yup';
5 | import mockOrders from '../../mocks/mockOrders.json';
6 | import { CheckoutInfo } from '../../models';
7 | import { render, screen, userEvent, waitFor } from '../../test/test-utils';
8 | import { yupLocale } from '../../utils';
9 | import { AddressForm, getAddressSchema } from './AddressForm';
10 |
11 | // set up yup errors
12 | yup.setLocale(yupLocale);
13 |
14 | // ---------- TestForm ----------
15 | interface TestFormProps {
16 | onSubmit: (checkoutInfo: CheckoutInfo) => void;
17 | }
18 |
19 | function TestForm({ onSubmit }: TestFormProps) {
20 | const schema = yup.object().shape({
21 | shippingAddress: getAddressSchema(),
22 | });
23 |
24 | const methods = useForm
58 |
61 | Form value
59 | {address !== undefined ?{title}
: null} 32 |
33 |
40 |
41 |
48 |
49 |
50 |
57 |
58 |
59 |
66 |
67 |
69 |
76 |
77 |
84 |
85 |
92 |
21 |
30 | );
31 | };
32 |
--------------------------------------------------------------------------------
/src/components/AddressView/__snapshots__/AddressView.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`22 | {firstName} {lastName} 23 |
24 | {company !== undefined ?{company}
: null} 25 |{street}
26 |27 | {city}, {state} {zip} 28 |
29 |
6 |
27 | 9 | Elon Musk 10 |
11 |14 | Tesla, Inc. 15 |
16 |19 | 3500 Deer Creek Road 20 |
21 |24 | Palo Alto, CA 94304 25 |
26 |Centered Container
28 |Left
41 |Right
44 |Top
58 |Bottom
61 |View Centered Container
72 |Left
82 |Right
85 |Top
96 |Bottom
99 |
27 | {children}
28 |
29 | );
30 | };
31 |
32 | /**
33 | * ViewHorizontalContainer
34 | * - height: 100vh
35 | * - flexDirection: row
36 | */
37 | export const ViewHorizontalContainer = ({
38 | testId = 'view-horizontal-container',
39 | className = '',
40 | children,
41 | onClick,
42 | }: ContainerProps) => {
43 | return (
44 |
49 | {children}
50 |
51 | );
52 | };
53 |
54 | /**
55 | * VerticalContainer
56 | * - flex: 1
57 | * - flexDirection: column
58 | */
59 | export const VerticalContainer = ({
60 | testId = 'vertical-container',
61 | className = '',
62 | children,
63 | onClick,
64 | }: ContainerProps) => {
65 | return (
66 |
71 | {children}
72 |
73 | );
74 | };
75 |
76 | /**
77 | * ViewVerticalContainer
78 | * - height: 100vh
79 | * - flexDirection: column
80 | */
81 | export const ViewVerticalContainer = ({
82 | testId = 'view-vertical-container',
83 | className = '',
84 | children,
85 | onClick,
86 | }: ContainerProps) => {
87 | return (
88 |
93 | {children}
94 |
95 | );
96 | };
97 |
98 | /**
99 | * CenteredContainer
100 | * - Centers content inside a flex container
101 | * - flex: 1
102 | */
103 | export const CenteredContainer = ({
104 | testId = 'centered-container',
105 | className = '',
106 | children,
107 | onClick,
108 | }: ContainerProps) => {
109 | return (
110 |
115 | {children}
116 |
117 | );
118 | };
119 |
120 | /**
121 | * ViewCenteredContainer
122 | * - Centers content in the entire view
123 | * - height: 100vh
124 | */
125 | export const ViewCenteredContainer = ({
126 | testId = 'centered-container',
127 | className = '',
128 | children,
129 | onClick,
130 | }: ContainerProps) => {
131 | return (
132 |
137 | {children}
138 |
139 | );
140 | };
141 |
142 | /**
143 | * ScrollingContainer
144 | * - overflow: 'auto'
145 | */
146 | export const ScrollingContainer = ({
147 | testId = 'scrolling-container',
148 | className = '',
149 | children,
150 | onClick,
151 | }: ContainerProps) => {
152 | return (
153 |
158 | {children}
159 |
160 | );
161 | };
162 |
--------------------------------------------------------------------------------
/src/components/Containers/__snapshots__/Containers.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Containers CenteredContainer renders correctly 1`] = `
4 |
9 | Hello World!
10 |
11 |
20 | Hello World!
21 |
22 |
31 | Hello World!
32 |
33 |
42 | Hello World!
43 |
44 |
53 | Hello World!
54 |
55 |
64 | Hello World!
65 |
66 |
75 | Hello World!
76 |
77 | {goodBoyText}
;
28 | }
29 | };
30 |
31 | describe('{StringUtils.errorToString(error)}
18 |{error}
: null;
9 |
--------------------------------------------------------------------------------
/src/components/Form/TextField.css:
--------------------------------------------------------------------------------
1 | .text-field__input {
2 | display: block;
3 | width: 100%;
4 | padding: var(--px-8);
5 | font-size: var(--font-size-base);
6 | }
7 |
--------------------------------------------------------------------------------
/src/components/Form/TextField.stories.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { Story, Meta } from '@storybook/react';
3 | import { yupResolver } from '@hookform/resolvers/yup';
4 | import { useForm } from 'react-hook-form';
5 | import * as yup from 'yup';
6 | import { TextField } from './TextField';
7 |
8 | // ---------- TestForm ----------
9 | const schema = yup.object().shape({
10 | firstName: yup.string().required(),
11 | lastName: yup.string().required(),
12 | });
13 |
14 | interface Person {
15 | firstName: string;
16 | lastName: string;
17 | }
18 |
19 | interface TestFormProps {
20 | onSubmit: (person: Person) => void;
21 | }
22 |
23 | function TestForm({ onSubmit }: TestFormProps) {
24 | const { formState, register, handleSubmit } = useForm
67 |
75 | );
76 | };
77 |
78 | export const TextFieldStory = Template.bind({});
79 | TextFieldStory.storyName = 'TextField';
80 | TextFieldStory.args = {};
81 |
--------------------------------------------------------------------------------
/src/components/Form/TextField.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { yupResolver } from '@hookform/resolvers/yup';
3 | import { useForm } from 'react-hook-form';
4 | import * as yup from 'yup';
5 | import { render, screen, userEvent, waitFor } from '../../test/test-utils';
6 | import { TextField } from './TextField';
7 |
8 | // ---------- TestForm ----------
9 | const schema = yup.object().shape({
10 | firstName: yup.string().required(),
11 | lastName: yup.string().required(),
12 | });
13 |
14 | interface Person {
15 | firstName: string;
16 | lastName: string;
17 | }
18 |
19 | interface TestFormProps {
20 | onSubmit: (person: Person) => void;
21 | }
22 |
23 | function TestForm({ onSubmit }: TestFormProps) {
24 | const { formState, register, handleSubmit } = useForm
69 |
74 | Form value
70 |71 | {person?.firstName} {person?.lastName} 72 |
73 |
8 |
10 |
11 |
41 |
42 | Loading...
;
8 | };
9 |
--------------------------------------------------------------------------------
/src/components/Loading/__snapshots__/Loading.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`
6 | Loading...
7 |
8 | | {item.productName} | 19 |20 | {item.quantity} 21 | | 22 |26 | {NumberUtils.formatAsMoney(OrderItemUtils.totalItem(item))} 27 | | 28 |
| Total | 34 |35 | {NumberUtils.formatAsMoney(OrderItemUtils.totalItems(items))} 36 | | 37 |
18 |
19 |
22 |
24 | );
25 | };
26 |
--------------------------------------------------------------------------------
/src/components/OrderView/__snapshots__/OrderItemList.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`{DateUtils.formatISODate(createdAt)}
21 || 13 | iMac 14 | | 15 |18 | 1 19 | | 20 |24 | 1,299.00 25 | | 26 |
| 31 | iPad 32 | | 33 |36 | 1 37 | | 38 |42 | 249.00 43 | | 44 |
| 49 | Nest Learning Thermostat 50 | | 51 |54 | 1 55 | | 56 |60 | 249.00 61 | | 62 |
| 69 | Total 70 | | 71 |74 | 1,797.00 75 | | 76 ||
23 |
27 | {name}
24 |{description}
25 |${NumberUtils.formatAsMoney(price)}
26 |
30 |
34 | {name}
31 |{description}
32 |${NumberUtils.formatAsMoney(price)}
33 |
9 | 
14 |
32 |
14 |
17 |
31 | 18 | iMac 19 |
20 |23 | The 27‑inch iMac is packed with powerful tools and apps that let you take any idea to the next level. Its superfast processors and graphics, massive memory, and all-flash storage can tackle any workload with ease. And with its advanced audio and video capabilities and stunning 5K Retina display, everything you do is larger than life. 24 |
25 |28 | $1,299.00 29 |
30 |Welcome {username}
;
14 | };
15 |
16 | describe('EnvContext', () => {
17 | it('return value if environment variable exists', () => {
18 | render(
19 | Could not fetch the cart
25 |Shopping Cart
32 | {cart.items.length === 0 ? ( 33 |Your cart is empty.
34 | ) : ( 35 |
13 |
18 | );
19 | };
20 | CartViewStory.storyName = 'CartView';
21 |
--------------------------------------------------------------------------------
/src/pages/HomePage/CartView/CartView.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { rest } from 'msw';
3 | import { Route, Routes } from 'react-router-dom';
4 | import { MOCK_API_URL } from '../../../mocks/constants';
5 | import { server } from '../../../mocks/server';
6 | import { CartUtils } from '../../../models';
7 | import {
8 | render,
9 | screen,
10 | userEvent,
11 | waitFor,
12 | waitForElementToBeRemoved,
13 | } from '../../../test/test-utils';
14 | import { CartView } from './CartView';
15 |
16 | const START_ORDER = 'Please click on a product to start your order.';
17 |
18 | const cart = {
19 | items: [
20 | {
21 | productId: 'apple-imac',
22 | productName: 'iMac',
23 | price: 1299,
24 | quantity: 1,
25 | },
26 | {
27 | productId: 'apple-macbook-pro',
28 | productName: 'MacBook Pro',
29 | price: 699,
30 | quantity: 1,
31 | },
32 | ],
33 | };
34 |
35 | const MockCheckoutPage = () => {
36 | return 14 | Add items here from the CatalogView. 15 |
16 |Checkout Page
; 37 | }; 38 | 39 | describe('{StringUtils.errorToString(error)}
44 |Could not fetch the cart
52 |Shopping Cart
60 | {cart.items.length > 0 ? ( 61 | 64 | ) : null} 65 |Please click on a product to start your order.
68 | ) : ( 69 || {item.productName} | 74 |75 | 82 | handleQuantityChange(item.productId, e.target.value) 83 | } 84 | /> 85 | | 86 |90 | {NumberUtils.formatAsMoney(item.price * item.quantity)} 91 | | 92 |
93 | |
99 |
| Total | 105 |106 | {NumberUtils.formatAsMoney(CartUtils.total(cart))} 107 | | 108 |
{StringUtils.errorToString(error)}
22 |Could not fetch catalog
30 |Page Not Found
10 |7 | Page Not Found 8 |
9 |{StringUtils.errorToString(error)}
24 |Could not fetch the orders
32 |Your have no orders.
51 | ) : ( 52 | sortedOrders.map((order) => ( 53 |
54 |
56 | ))
57 | )}
58 |