sp-dev-fx-webparts/samples/react-jest-testing
dependabot[bot] 9ae98a10a4
Bump decode-uri-component in /samples/react-jest-testing
Bumps [decode-uri-component](https://github.com/SamVerschueren/decode-uri-component) from 0.2.0 to 0.2.2.
- [Release notes](https://github.com/SamVerschueren/decode-uri-component/releases)
- [Commits](https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.2)

---
updated-dependencies:
- dependency-name: decode-uri-component
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
2022-12-31 03:54:03 +00:00
..
.devcontainer Added 1.8.2 containers 2022-02-16 00:00:27 -05:00
assets Changed docs links to learn 2022-10-24 09:42:45 -04:00
config Jest testing sample upgraded to SPFx version 1.7.0 (#720) 2018-12-19 09:19:36 +02:00
devops Changed docs links to learn 2022-10-24 09:42:45 -04:00
jest Adds SPFx React Jest Testing sample (#507) 2018-05-12 04:59:42 +03:00
src React jest testing sample upgraded to SPFx version 1.8.2 (#898) 2019-07-05 15:56:18 +03:00
teams_iceCreamShop Jest testing sample upgraded to SPFx version 1.7.0 (#720) 2018-12-19 09:19:36 +02:00
vscode Upgrade to 1.5.0, missing launch.json config added (#530) 2018-06-15 08:46:43 +03:00
.editorconfig Adds SPFx React Jest Testing sample (#507) 2018-05-12 04:59:42 +03:00
.gitignore Adds SPFx React Jest Testing sample (#507) 2018-05-12 04:59:42 +03:00
.yo-rc.json React jest testing sample upgraded to SPFx version 1.8.2 (#898) 2019-07-05 15:56:18 +03:00
README.md Changed docs links to learn 2022-10-24 09:42:45 -04:00
gulpfile.js Adds SPFx React Jest Testing sample (#507) 2018-05-12 04:59:42 +03:00
package-lock.json Bump decode-uri-component in /samples/react-jest-testing 2022-12-31 03:54:03 +00:00
package.json Bump minimatch and gulp in /samples/react-jest-testing 2022-11-07 04:34:35 +00:00
tsconfig.json React jest testing sample upgraded to SPFx version 1.8.2 (#898) 2019-07-05 15:56:18 +03:00
tslint.json Jest testing sample upgraded to SPFx version 1.7.0 (#720) 2018-12-19 09:19:36 +02:00
yarn.lock Bump decode-uri-component in /samples/react-jest-testing 2022-12-31 03:54:03 +00:00

README.md

SharePoint Framework React Jest Testing sample

SPFx-Jest-Enzyme-Sinon unit testing starter kit

Summary

This sample uses the popular Jest Testing Framework with a SPFx client side solution. It is a SPFx-Jest-Enzyme-Sinon starter kit so you can start writing and debugging unit tests in typescript for your SPFx solution. The setup includes unit tests examples, code coverage reports in different formats, visual studio code unit test debug configurations for typescript, setting a coverage threshold (gates) for continuous integration and continuous deployment scenarios.

Visual Studio Code Typescript debugging support for the Jest unit tests

The Visual Studio Code launch.json has all the debug configurations needed to start debugging the unit tests for your SPFx solution. There is a Jest All configuration that will execute all the tests on demand. There is also a Jest Watch (watcher) configuration that will let live execution or debugging only on the affected by a change unit tests (if the solution is part of hg/git repo) and will provide immediate feedback if a test passes or fails on component code change. This is good option for Test Driven Development scenarios.

SharePoint Framework Jest Visual Studio Code - debugging unit test

Important: The debug configurations should be placed in the .vscode -> launch.json file to make the debugging work

The sample has folder named vscode where the launch.json configuration for debuggind jest is stored. The configurations should be copied to your .vscode folder -> launch.json file. Once copied into your launch.json, then they will appear in your visual studio code debugging tab.

Sinonjs is included as mocking framework for the SPFx solution

The solution also includes Sinonjs that can be used to spawn spies, stubs and mocks.

Enzyme is included to extend to unit tests support for React Components

Enzyme is a testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output.

Basic unit tests scenarios included to demonstrate how Jest, Sinon and Enzyme can be used to test the SPFx React components

I wrote several unit tests to demonstrate how all testing libraries can be used together to test a React component with business logic and external dependencies included. Examples for mocking promises, pnpjs calls, https calls and spying on methods included for a quick start in unit testing your SPFx solution.

Built-in Jest code coverage

Jest uses Istanbul under the hood to produce various code coverage reports including live VS code terminal output. Such reports can be integrated in CI tools like VSTS (Visual Studio Team Services) or Jenkins.

SharePoint Framework Jest tests code coverage reports

Jest coverage threshold for continuous deployment pipeline setups

Jest coverage thresholds are set to yield error and potentially fail a build or pre-build if there isn't 100% coverage on branches, functions, lines and statements together. The thresholds can be changed by altering the solution packages.json file where the Jest configuration is.

"coverageThreshold": {
  "global": {
    "branches": 100,
    "functions": 100,
    "lines": 100,
    "statements": 100
  }
}

Generates summary report in JUnit xml format so it can be integrated with VSTS and Jenkins

After the execution of the unit tests a summary report will be generated under the ./jest/summary-jest-junit.xml path. Because it uses junit xml formatting most of the CI tools can show the summary on a dashboard. Having that is useful for reporting. That summary is generated by jest-junit (npm module).

Unit tests support for SPFx extensions

The sample uses SPFx web part, but the same setup applies for SPFx extensions and they can simply be added to the solution and unit tested the same way.

Compatibility

SPFx 1.7.0 Node.js v8 Compatible with SharePoint Online Does not work with SharePoint 2019 Does not work with SharePoint 2016 (Feature Pack 2) Local Workbench Compatible Hosted Workbench Compatible Compatible with Remote Containers

Applies to

Prerequisites

Solution

Solution Author(s)
react-jest-testing Velin Georgiev ( @VelinGeorgiev )

Version history

Version Date Comments
0.0.1 May 9, 2018 Initial commit
0.0.2 June 12, 2018 Update to 1.5.0, missing launch.json added
0.0.3 September 27, 2018 Update to 1.6.0
0.0.4 December 10, 2018 Update to 1.7.0
0.0.5 June 23, 2019 Update to 1.8.2

Minimal Path to Awesome

  • Clone this repository.
  • Open the command line, navigate to the web part folder and execute:
    • npm i
    • npm test (NOT gulp test)

This sample can also be opened with VS Code Remote Development. Visit https://aka.ms/spfx-devcontainer for further instructions.

Note: You might want to switch to a test fake offline provider to use the full functionality of the web part when on local workbench. You can do so by replacing the real pnpjs provider in IceCreamShopWebPart.ts with its fake one at line 37. Just replace IceCreamPnPJsProvider() with IceCreamFakeProvider().

iceCreamProvider: new IceCreamPnPJsProvider(sp), //new IceCreamFakeProvider() // replace with Fake provider when offline workbench.

Features

This Web Part illustrates the following concepts on top of the SharePoint Framework:

  • Using React for building SharePoint Framework client-side web parts.
  • Using Jest Testing Framework for SPFx unit tests.
  • Unit tests included to demonstrate how spies, mocks can be used.
  • The use of Enzyme to speed up React unit test productivity.
  • The use of SharePoint Patterns and Practices Reusable Client-side Libraries (PnP Js).
  • Generating unit test code coverage reports for continious integreation tools such as VSTS
  • Generating unit test summary reports for continious integreation tools such as VSTS

Help

We do not support samples, but this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.

If you're having issues building the solution, please run spfx doctor from within the solution folder to diagnose incompatibility issues with your environment.

You can try looking at issues related to this sample to see if anybody else is having the same issues.

You can also try looking at discussions related to this sample and see what the community is saying.

If you encounter any issues while using this sample, create a new issue.

For questions regarding this sample, create a new question.

Finally, if you have an idea for improvement, make a suggestion.

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.