Write Unit Tests for a Wix CLI Project

This article explains how to write unit tests for a CLI project using Vitest and @testing-library/react.

This article covers:

• Preparing your project for unit testing with Vitest.
• Writing unit tests for your project.

Before you begin

• You must have a project that was created using the Wix CLI.
• You must be logged into your Wix account. If you don't have one, sign up for a Wix account.

Step 1 | Configure your project for tests

1. Run the following command to install the required packages:

   Copy

   Note: Since the Wix CLI uses React 16 for dashboard extensions, we currently only support version 12 of @testing-library/react.

2. Create or update your vitest.config.js file with the following configuration:

   Copy

3. Create a test setup file at tests/setup.ts. This file is used for general test configuration with Vitest:

   Copy

4. Add the following script to your package.json file to trigger unit tests:

   Copy

Step 2 | Write unit tests

Depending on your project's functionality, testing your project's react components may involve mocking Wix JavaScript SDK APIs, backend interactions, or both.

Test a react component without the SDK or backend interactions

To test a react component like a dashboard page, check that aspects of the component would be rendered correctly.

For example, given the following dashboard page:

You can test whether the "Dashboard Page" text would be present on the page when rendered.

Test a component that involves an SDK API call

If your component's code calls a Wix JavaScript SDK API, render the component and manually mock the API.

The following example demonstrates how to mock the Dashboard API's showToast() method.

Test a component that involves backend interactions

If your project interacts with a backend, mock those interactions using Vitest.

For example, if you have a page that calls the CRM backend to retrieve user contacts:

You would mock the backend interactions with the API using vitest as follows:

See also

• Wix CLI integration in CI/CD workflows