Azure DevOps For SPFx Unit Testing

In this article, we will automate running the test cases using Azure DevOps.

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.