Module mock file

This article covers the module mock file in Microsoft Dynamics 365 Commerce.

Module mock files are used to configure mock data for modules. Therefore, they can help you do local testing. The default module mock file is located at \src\MODULE_NAME\MOCKS\MODULE_NAME.json.

Here is an example of a mock file.

{
	"id": "R1Module1",
	"config": {
	    "imageAlignment": "left",
	    "productTitle": "Retro Horn Rimmed Keyhole Nose Bridge Round Sunglasses",
	    "productDetails": "High-quality and pioneered with the perfect blend of timeless classic and modern technology with hint of old school glamor.",
	    "productImage": {
		    "src": "https://bit.ly/33cMGxr",
		    "altText": "Retro Horn Rimmed Keyhole Nose Bridge Round Sunglasses"
	    },
	    "buttonText": "Buy Now",
	    "productIds": "68719498121"
	},
	"data": {
	    "actionResponse": {
		    "text": "Sample Action Response"
	    }
	},
	"typeName": "product-feature"
} 

Several configuration properties are used to set values for configuration fields that are set in the module definition file. When modules are run on a production server, this data comes from the Microsoft Dynamics content management system (CMS) database, as configured by the page authors, instead of a mock file.

To render a module by using data from a mock file, run the yarn start command, and then open the following URL in a web browser: https://localhost:4000/modules?type=MODULE_NAME.

In addition to the default mock file, you can add multiple other mock files. In this way, you can view and test various scenarios.

To add a mock file, create a new JavaScript Object Notation (JSON) file in the mocks folder, and give it a unique name (for example, \src\MODULE_NAME\MOCKS\MODULE_NAME_TEST.json).

To render a module by using a different mock file, run the yarn start command, and then open the following URL in a web browser: https://localhost:4000/modules?type=MODULE_NAME:MODULE_NAME_TEST.

Modules overview

Module definition file

Module React component file

Module view file

Module data file

Module test file

Module props.autogenerated.ts file