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
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!
