Writing unit tests for your SharePoint Framework components

April 05, 2017

Last week I published a sample project on GitHub which shows how you can test your SharePoint Framework components with some predefined unit tests.

Info: here is a link to the repo - https://github.com/estruyf/spfx-testing-wp

The current sample is created with React. The unit tests are created only to test the actual component instead of the main web part.

Info: At this moment, there is a dependency issue when you try to create unit tests for the actual web part. Read more about this here: https://github.com/SharePoint/sp-dev-docs/issues/526

Now, when you are working with React and components, it actually makes more sense to do intensive testing of the components itself. This gives you much more control over the component tests and the outcomes you want to test. For example, you can change the state, trigger function calls, faking click events and more. Of course, once the dependency issue is gets fixed, you can also write some tests for the actual web part.

If you want to write some test yourself, you will have to go through a couple of steps which will be explained in this article.

First some configuration

When you created a new SPFx project, you automatically get a tests folder in the web part folder.

Tests folder located in your project

Tests folder located in your project

In the folder, you find a sample test file: <webpart-name>.test.ts. The first thing you will have to do when you want to test react components is changing the ts extension to tsx. This allows you to load the components in JSX syntax.

Sample test file

Sample test file

Installing a couple of developer dependencies

Once you changed the file extension of the test file. You have to install the following addition developer dependencies:

Enzyme is a set of test utilities created for React (developed by Airbnb) and requires the react-addons-test-utils. Enzyme makes it easy to assert, manipulate your components' output.

To install these two dependencies, execute the following command: npm install enzyme react-addons-test-utils enzyme-adapter-react-15 react-testrenderer --save-dev --save-exact

Writing tests for your React components

Now you are ready to write some tests. Override the contents of the test file, with the following code:

The code you see above does not contain any tests yet. The before function is the first once which gets called and it loads the component.

At the end of the tests, the after function restores all components.

You can also do something before and after each test by writing beforeEach and afterEach functions.

Tests are written by it() (it should do something) functions. Here are a couple of examples:

More information about JavaScript unit testing;

Running your tests

You can run your tests via this command: gulp test. When you run the command with the sample project, you should get the following result:

Sample component tests outcome

Sample component tests outcome

Info: the sample web part also contains a mock HTTP client which simulates an async call to retrieve items from a list. The web part renders the following output;

Sample web part rendering

Sample web part rendering