Skip to content
Sample web part with some predefined unit tests
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode Updates to support debugging unit-tests Oct 11, 2017
assets Initial commit Mar 27, 2017
src/webparts/helloWorld Updated map loop Jun 5, 2018
.gitattributes Initial commit Mar 27, 2017
.npmignore Initial commit Mar 27, 2017
gulpfile.js Updates to support debugging unit-tests Oct 11, 2017
tsconfig.json Updated project to SPFx v1.4.1 Jun 5, 2018

SPFx sample project with some predefined unit tests

This is a sample project which contains some predefined React component unit tests. In the project, you find a standard SPFx web part with one addition that it shows a list based on an async call (makes use of the MockHttpClient).

Web part render

The project contains the following tests:

  • Check if the component contains a paragraph
  • Check if the component renders the specified description
  • Check if the component contains a list element
  • Check if the results state is null. This should be the case on first load.
  • Check if the componentDidMount method gets called
  • Check if the component has rendered three items in the list. These items are coming from the MockHttpClient.
  • Check in which the component state gets updated from the test itself and checking if the right number of items are rendered in the list.

When you run the tests, the result should look like this:

Test results

Extra dependencies

As this is a test sample for testing React components, I made use of the following extra testing dependencies:

  • enzyme
  • enzyme-adapter-react-15
  • react-test-renderer
  • react-addons-test-utils

These dependencies are also specified in the package.json file. So, once you run npm install they will automatically get downloaded.

HelloWorld.test.ts file extension change to TSX (JSX templating enabled)

The file extension of the default HelloWorld.test.ts, which comes with the SPFx yeoman generator, is changed to TSX so that the JSX templating syntax is available. This change is necessary to mount components with enzyme. Example: renderedElement = mount(<HelloWorld description={descTxt} />);

How to use it?

  • Clone this repo
  • Run npm install
  • Run gulp test
You can’t perform that action at this time.