Docs
Authors:
Cameron Johns, Cille Schliebitz, Anita Gu
Changed on:
3 Feb 2025
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.
`useAuth`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:
`useAuthResponse``useAuth``data``attributes`Here are the mock objects:
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 };Language: plain_text
Name: Auth Response Mock
Description:
Mocking the response for the
`useAuth`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 };Language: plain_text
Name: Data mock
Description:
Mock data for the result from the page query
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 ];Language: plain_text
Name: Attributes Mock
Description:
Mocking the manifest configured dynamic attributes
Want to learn more?
To read more about unit testing components, go to Component SDK - Geting Started > Unit Testing
Copyright © 2025 Fluent Retail Pty Ltd (trading as Fluent Commerce). All rights reserved. No materials on this docs.fluentcommerce.com site may be used in any way and/or for any purpose without prior written authorisation from Fluent Commerce. Current customers and partners shall use these materials strictly in accordance with the terms and conditions of their written agreements with Fluent Commerce or its affiliates.
