Enable Jest testing of SharePoint Framework projects in one simple step

Setting up projects to use Jest, especially to test the rendering of your ReactJS SharePoint Framework projects & use the popular tool Enzyme for testing rendering, isn't a trivial task, until now!

Over the last two weeks, I have been presenting on the topic of the SharePoint Framework (SPFx) at a pair of SharePoint conferences (the European SharePoint Conference in Copenhagen & SharePoint Fest in Chicago). A common topic that came up a few times in various presentations as well as in conversations with attendees is automated testing SPFx projects. I kept hearing developers say that they liked the idea, but it was a pain to configure a project to use Jest, especially for those that leverage React, as well as running tests as you usually have another window open.

I’m a fan of using Jest for testing and decoupling the tests from the SPFx build pipeline as it dramatically speeds up the process of running your tests. In my last post, Testing SPFx Projects Efficiently with Minimal Distractions: Wallaby.js , I showed how to simplify running your tests. But this only helps with the running of tests.

Setting up a project to use Jest, especially if you want to test the rendering of your React-based SPFx projects & use the popular tool Enzyme by Airbnb for testing your component rendering, isn’t exactly a trivial task. There are multiple packages you need to install for the rendering components, to install polyfills for missing APIs in the headless browser used in testing, configuring Jest as well as set up scripts (for Enzyme using the correct adapter for the desired version of React).

I set out to see if there were any options to simplify this with existing projects… and thankfully there is using Jest presets !

Introducing Jest presets for SPFx projects

I’ve created three Jest presets for SPFx projects. All you have to do is install a single npm package depending on your project and then start writing your tests! They handle the installation of all necessary npm packages, configuration, and settings needed. That’s it… just one simple step after installing your project.

Add Jest to SPFx projects without React

Want to add tests to your SPFx project that isn’t using React? Install the @voitanos/jest-preset-spfx when you install Jest and you’re good to go:

npm install jest @voitanos/jest-preset-spfx --save-dev

Add Jest to SPFx projects with React

For those of you who are using React, use either the @voitanos/jest-preset-spfx-react15 or @voitanos/jest-preset-spfx-react16 depending on the version of React you are using:

## in the case of React v15 in SPFx <= v1.6.0
npm install jest @voitanos/jest-preset-spfx-react15 --save-dev

## in the case of React v16 in SPFx >= v1.7.0
npm install jest @voitanos/jest-preset-spfx-react16 --save-dev
Important: Update - July 2021
Make sure you check the docs for the respective packages linked above. Since the initial release of these presets, Microsoft added the ability to use different versions of TypeScript with your SPFx projects. Because the version of TypeScript can impact the version of the packages used with Jest, I’ve added distribution tags that correspond with the version of TypeScript you’re using in your project.

How this works

The presets include everything you need to test in each situation. Each contains all the npm packages needed to write Jest tests. The base Jest configuration for each situation is in a jest-preset.json in the root of each project.

After installing each package in your project, a post install script checks to see if you have a jest-config.json file in your project’s conf folder. If not, it copies one in with the preset property points to the name of the npm package. Jest will use this configuration file when you run it. You can override any of the Jest properties in the preset by setting them in the config file in your project.

The post-install script also updates your package.json file to add two scripts that simplify running tests. The test script (npm test) runs Jest and specifies the Jest configuration file that was copied into the config folder. The test:watch script (npm run test:watch) does the same thing as test except it monitors your project for code changes and will automatically rerun your tests.

Each npm package also includes a folder examples that you can copy into your project’s src folder to see some examples of a few tests.

What Do You Think?

I think testing is something you should add to your projects and I’m trying to make it as simple as possible to use one of the most popular testing frameworks out there: Jest!

Do these help you in writing your tests? Let me know in the comments below!

Andrew Connell
Microsoft MVP, Full-Stack Developer & Chief Course Artisan - Voitanos LLC.
Written by Andrew Connell

Andrew Connell is a full stack developer with a focus on Microsoft Azure & Microsoft 365. He’s received Microsoft’s MVP award every year since 2005 and has helped thousands of developers through the various courses he’s authored & taught. Andrew’s the founder of Voitanos and is dedicated to helping you be the best Microsoft 365 full stack developer. He lives with his wife & two kids in Florida.

Share & Comment