Start Testing and Debugging PCF Component in Local Test Harness

Correct Answer: C

The Components are reusable blocks that you can use for Power Apps applications.

Power Apps provides out-of-the-box standard controls (components) for creating applications, like HTML Text, Vertical Gallery, or Edit Form.

If your Power Platform solution requires more than standard controls, Power Apps also provides tools to create and reuse custom components.

Power Apps Component Framework (PCF) helps you to create these components.

After creating a PCF component, you need to test the new component.

You can start the local test harness from your component root directory by running the npm start command (Number 1) in a command window.

The command builds the code and starts the harness (Number 2).

Then a new PCF Test environment browser window opens (Number 1) with the component's name on the right panel (Number 2) and the running component in a container (Number 3)

The right panel provides three sections: Context inputs (Number 4), Data Inputs (Number 5), and Outputs.

You can interact with the component inside of the container (Number 3) or use the inputs to change the Form Factor, container sizes, property values.

If the PCF component needs data for testing, you can load a CSV file with the data.

The test environment reads the ControlManifest.Input.xml file for the required types of inputs.

You can add any additional inputs in this file if you need them for testing and debugging the component.

The test harness can help you see the real-time changes in the component's index.ts or ControlManifest.Input.xml.

If you start your test in watch mode: npm start watch, you will see an automatic reflection of the changes in the files on your component.

You also can use the debug functionality of your browser.

All other options are incorrect.

For more information about the test harness of the PCF components, please visit the below URLs:

To test and debug a Power Apps Component Framework (PCF) component in the local test harness, you need to perform the following steps:

1. Open the command prompt or terminal window.

2. Navigate to the project folder of your PCF component.

3. Run the following command to start the local test harness:

   pac pcf push --code-file <path-to-component>/dist/<component-name>.js --pcf-start

   This command pushes the component to the local test environment and starts the local test harness.

4. Open the web browser and go to the URL http://localhost:8181/. This will open the local test harness page.

5. In the local test harness, select the environment and entity where you want to test the component.

6. Drag and drop the component from the Components section to the form editor.

7. Make any necessary changes to the properties of the component.

8. Click the Save button to save the changes and reload the form with the component.

9. Use the component to test its functionality and verify that it works as expected.

To debug the component, you can use the browser developer tools to inspect the component and its behavior. You can also use the console to log messages and debug information.

Regarding the options provided in the question, the correct answer is B. pac pcf test start is the command that starts the local test harness for PCF components. Option A (npm run build) builds the component but does not start the local test harness. Option C (npm start) starts the default development server but does not start the local test harness. Option D (pac pcf new test) creates a new PCF project for testing but does not start the local test harness. Option E (npm t) runs the test suite for the component but does not start the local test harness.