Fluent Commerce Docs

This lesson covers the process of unit testing custom components using the tools provided within the Component SDK: Jest and React's test renderer. We'll walk through the steps of creating mock objects for dependencies (authentication, data, attributes), arranging the test environment, acting by rendering the component with the mocks, and asserting the output using snapshot testing. This process ensures the reliability and correctness of your custom components.

Key points

Testing Framework: The SDK includes Jest and React's test renderer for unit testing.
Mock Objects: Mock objects are created for external dependencies like authentication (`useAuth`), data from the page query, and dynamic attributes from the manifest.
Arrange, Act, Assert: The testing process follows the standard Arrange, Act, Assert pattern.
- Arrange: Mocks are set up and configured.
- Act: The component is rendered with the mock data.
- Assert: The rendered output is compared against a snapshot.
Snapshot Testing: Jest's snapshot feature is used to compare the component's output to a previously saved snapshot, ensuring consistency.
Testable Components: Unit tests help ensure the reliability and maintainability of custom components.

The SDK comes pre-packaged with the Jest mocking framework and React's test renderer.Unit testing components involve mocking out external dependencies and asserting behaviour of the component. You will use Jest's snapshot feature, which allows the test framework to compare the output of the component against the snapshot.The steps are as follows:

Create static mock objects:
- `useAuthResponse` - mock the response for the `useAuth` hook
- `data` - mock the data result from the page query
- `attributes` - mock the manifest configured dynamic attributes
Arrange: The Arrange step sets up the mocks. In this case, we simply need to tell the useAuth hook to return our previously prepared mock auth response object
Act: The Act step creates an instance of the TrainingMap component, taking in the mocked objects for page query response data and manifest configured dynamic attributes
Assert: The Assert step compares the rendered output of the component to the previously snapshotted output

Here are the mock objects: No alt provided

Auth Response mock:

1const useAuthResponse: MystiqueAuth.MystiqueAuth = {
2   loggedIn: true,
3   logout: () => {},
4   user: {
5     username: "F_syd@fcfashion.com.au",
6     timezone: "Australia/Sydney",
7     language: {
8       label: "English",
9       value: "en",
10     },
11     roles: [
12       {
13         role: {
14           name: "DASHBOARD_VIEW",
15         },
16         contexts: [
17           {
18             contextType: "location",
19             contextId: "4",
20           },
21         ],
22       },
23       {
24         role: {
25           name: "STORE_ASSISTANT",
26         },
27         contexts: [
28           {
29             contextType: "retailer",
30             contextId: "1",
31           },
32           {
33             contextType: "location",
34             contextId: "4",
35           },
36         ],
37       },
38     ],
39   },
40   context: {
41     level: "location",
42     current: {
43       contextType: "location",
44       contextId: "4",
45       label: "FC Fashion Sydney (F_SYD)",
46       details: {
47         ref: "F_SYD",
48         primaryAddress: {
49           latitude: -33.8845977,
50           longitude: 151.2075861,
51         },
52       },
53     },
54     available: [
55       {
56         contextType: "location",
57         contextId: "4",
58         label: "FC Fashion Sydney (F_SYD)",
59         details: {
60           ref: "F_SYD",
61           primaryAddress: {
62             latitude: -33.8845977,
63             longitude: 151.2075861,
64           },
65         },
66       },
67     ],
68     set: () => {},
69     roleCheck: () => ({ hasRole: true }),
70   },
71 };

Data mock:

1const data = {
2   edges: [
3     {
4       node: {
5         location: {
6           name: "FC Fashion Westfield Bondi Junction",
7           primaryAddress: {
8             longitude: 151.24997359266263,
9             latitude: -33.89138243611695,
10           },
11         },
12         virtualPositions: [
13           {
14             quantity: 56,
15           },
16         ],
17       },
18     },
19     {
20       node: {
21         location: {
22           name: "FC Fashion North Sydney",
23           primaryAddress: {
24             longitude: 151.2054,
25             latitude: -33.8396,
26           },
27         },
28         virtualPositions: [
29           {
30             quantity: 100,
31           },
32         ],
33       },
34     },
35   ],
36 };

Attributes mock:

1const attributes = [
2   {
3     label: "Ref",
4     value: "{{node.location.ref}}",
5   },
6   {
7     label: "Quantity",
8     value: "{{node.virtualPositions.0.quantity}}",
9   },
10 ];