---
sourceDocument: Yokohama Build or modify applications
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/yokohama/application-development

 Release :

    - yokohama

ft:locale :

    - en-US

ft:publication_title :

    - Yokohama Build or modify applications

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# Test a component for Virtual Agent

# Test a component for Virtual Agent {#ariaid-title1}

* Release version: Yokohama
* 
* Updated January 30, 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes to read

Test your Virtual Agent custom component before deploying it to your
instance.

## Before you begin

* Set up your environment. For instructions, see the [ServiceNow®
  Developer Site](https://developer.servicenow.com/dev.do#!/reference/next-experience/xanadu/cli/getting-started).
* Set up your component project. For instructions, see the [ServiceNow®
  Developer Site](https://developer.servicenow.com/dev.do#!/reference/next-experience/xanadu/cli/cli)
* Develop your component. For instructions, see the ServiceNow® Developer Site
* [Add properties to communicate with Virtual Agent](https://servicenow-prod.fluidtopics.net/Cshksbbzl5PRxzMnK8sPDQ "To develop a component for Virtual Agent, add specific properties and actions to interact with the Virtual Agent client interface. The properties required depend on the type of component you are creating.")

{#test-va-component__ul_wb3_xbn_tkb}

Role required: virtual_agent_admin or admin

## About this task

Virtual Agent components must be tested within the Virtual Agent client chat to ensure that the component responds correctly to user input. You can set properties in your component project to test your component in a mock Virtual Agent test client tool.

## Procedure

1. Add a dependency on the test client tool to your component project.
   1. Open the \<component-name\>/package.json file in your component project.
   2. Add `"@servicenow/sdk-ci": "1.0.8"` and `"@servicenow/library-translate": "^18.0.0"` to the `devDependencies` object.

   {#test-va-component__substeps_uwb_fjf_vmb}  
   Here is an example package.json file with the correct dependencies.

       "dependencies": {
           "@servicenow/ui-renderer-snabbdom": "yokohama",
           "@servicenow/library-translate": "^18.0.0",
           "@servicenow/now-button": "yokohama",
           "@servicenow/now-dropdown": "yokohama",
           "@servicenow/sass-generic": "yokohama",
           "@servicenow/cli-archetype": "yokohama",
           "@servicenow/sdk-ci": "1.0.8"
       }

2. Add sample properties to use as the initial state of the component in your test.
   1. Add a \<component-name\>/example/sampleProps.json file with initial properties to render in your test.

   {#test-va-component__substeps_v2f_flf_vmb}  
   Here is an example sampleProps.json file with initial properties set for a slider component.

       {	
       	"label": "How many penguins do you want to buy?",
       	"defaultValue": 10,
       	"sliderMin": 20,
       	"sliderMax": 80,
       	"unitName": "penguins",
       	"unitIcon": "https://image.flaticon.com/icons/svg/141/141836.svg"  
       }

3. Update the example.js file to open the component through the test client tool using the sample properties that you created.
   1. Open the \<component-name\>/example/element.js file in your component project.
   2. Add statements to import `@servicenow/sdk-ci` and the sample properties file you created.
   3. Add the following statement, replacing `<component-name>` with your component's name to create the test tool with initial data from your sample properties.  

          const el = document.createElement('tool-ci-custom-control-tester');
          el.componentTagName="<component-name>";
          el.initialExampleData=sampleProps;
          document.body.appendChild(el);

   {#test-va-component__substeps_odn_hjf_vmb}  
   Here is an example example.js file that opens the component using the test client tool.

       import '../src/now-chat-control-slider';

       import '@servicenow/sdk-ci';

       import sampleProps from './sampleProps.json';

       const el = document.createElement('tool-ci-custom-control-tester');
       el.componentTagName="<component-name>";
       el.initialExampleData=sampleProps;
       document.body.appendChild(el);

4. Run the development server command to view your component in a test browser.  

       $ snc ui-component develop [--entry entry --open --port port --host host]

   Pass in values for these parameters.  
   {#test-va-component__table_lnx_bzt_vkb__entry__2}

   | Name | Description |
   |-|-|
   | entry | Path to the test module in your component project. Default: example/index.js. |
   | open | Opens the default browser and navigates to the test page. Default: false. |
   | port | Port where the development server runs. Default: 8081. |
   | host | Host address to use if you want your local development server to be accessible externally by others. Typically set to `0.0.0.0` |
   [ ]

   {#test-va-component__table_lnx_bzt_vkb}  

       $ snc ui-component develop --entry example/hello.js --open --port 3000

   The component opens in the test client tool. You can see the initial
   data provided in the Custom Control JSON Input Data
   field and the component's output in the Custom Control Return Data field.

## What to do next

If your component is working as expected, deploy it to your instance. For instructions, see the [ServiceNow®
Developer Site](https://developer.servicenow.com/dev.do#!/reference/next-experience/xanadu/cli/development-flow).

After developing the component and deploying it to your instance, add it to Virtual Agent Designer using a custom control and definition. For more information, see [Virtual Agent custom controls](https://www.servicenow.com/docs/access?context=custom-controls&version=yokohama&pubname=yokohama-conversational-interfaces&ft:locale=en-US).
**Related concepts**   

* [Create custom components using ServiceNow CLI](https://servicenow-prod.fluidtopics.net/jTeyEvE9838m5UKKaMSp0Q "Develop custom components using the Next Experience UI Framework and the ui-component extension.")