Overview

SharePoint Framework is JavaScript based and supports any JavaScript framework for testing. The test cases can be implemented using Jest and Enzyme. The test cases help to validate the SPFx solutions for each of its releases. Please read through my previous article Unit Test With Jest And Enzyme to develop test cases for SPFx solution. The test cases had to run manually.

Recommended Reading

The below articles are recommended to read before continuing with this article.

Changes to SPFx Solution for Automated Testing using Azure DevOps

Follow the below steps to make changes to the SPFx solution.
Run the below command to install the jest-junit dependency to get test reports which Azure DevOps can process.
  1. npm i jest-junit --save-dev --save-exact
On the command prompt, run the below command to open the SPFx solution in an editor of your choice.
  1. code .
Add the following jest configuration after devDependencies section inside the package.json file.
  1. "jest": {
  2. "reporters": [
  3. [
  4. "jest-junit", {
  5. "suiteName": "SPFx Unit Test",
  6. "outputDirectory": "./reports/",
  7. "outputName": "./junit.xml"
  8. }
  9. ]
  10. ]
  11. }
On the command prompt, run the below command to test the configuration locally.
  1. npm test
It will create a new folder named “reports” and junit.xml file.

Azure DevOps Build Pipeline Configuration

Create a repository in an Azure DevOps project and add the code. Once the repository is created, create a new build pipeline by adding below tasks.
Install Node JS
  • On the default agent, click the + sign.
  • Search for “Node”.
  • Add Node.js tool installer.
  • Specify the version as 8.x or 10.x
Azure DevOps For SPFx Unit Testing

Install npm packages

Restore the needed npm packages before starting the build process.
  • Add npm task.
  • Verify if the command is set to install.
Azure DevOps For SPFx Unit Testing

Run Test Cases

  • Add npm task.
  • Set command to custom.
  • In the “Command and arguments” type “test”.
Azure DevOps For SPFx Unit Testing

Publish Test Results

  • Add “Publish Test Results” task.
  • Select “Test result format” as JUnit.
  • In the “Test results files”, specify “**/junit.xml”.
Azure DevOps For SPFx Unit Testing

Execute Test Cases with Azure DevOps

Queue a new build and wait for the output.
Azure DevOps For SPFx Unit Testing
Click the “Tests” tab to view the test outcome.
Azure DevOps For SPFx Unit Testing
The test outcome will display the number of passed and failed tests along with the run duration and pass percentage. Click on each of the test cases to view the details of each test case run.

Summary

The test cases help to validate the SPFx solutions for each of its releases. The test cases can be implemented using Jest and Enzyme. We can automate the running of test cases using Azure DevOps. The test outcome from Azure DevOps summarizes the number of passed and failed test cases. Although the test cases fail, the build may continue further with the packaging and deployment.