Write Unit Tests for a Wix CLI Application

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

This article covers:

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

Before you begin

Before getting started, make sure that:

• You have an app project that was created using the Wix CLI.
• You're logged into your Wix Studio account. If you don't already have one, sign up for a Wix Studio account.

Step 1 | Prepare your app for unit testing with Vitest

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

   Copy

   Note: Since the Wix CLI uses React 16, 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 for your app

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

Testing 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.

Testing 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.

If your application 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