Late last year I published a few Jest presets to simplify adding automated testing to your SharePoint Framework (SPFx) projects. These are complete with example tests including testing the rendering of components, testing async functions using promises or callbacks and even simulating user events. You can learn more about the presets in the original post, Enable Jest testing of SharePoint Framework Projects in One Simple Step. In this post, I want to share some updates to the presets that have been published.
If you aren’t familiar with the presets, let me quickly recap the WHAT, WHY & HOW questions…
Adding testing to projects is hard: Jest presets simplify it
Arguably, the hardest thing about adding automated testing to your SPFx projects is installing & configuring the necessary tools. Once that’s done, writing the tests isn’t that bad. Sure, there are some APIs you need to learn, but once a project is set up, you’re good to go. The challenge with SPFx projects & using Jest as your testing tool of choice, as I explain in the blog post mentioned above, is that there are a bunch of tools and configuration you need to get just right for it to work.
This is further complicated as there are different configurations you need to address. Maybe you’re just using no web framework, or maybe you’re using React. But if you’re using React, maybe you’re in SharePoint Online where today we can use React v16, or maybe you’re in SharePoint on-premises (2016 / 2019) where you’re stuck with React v15. All three scenarios require different configurations.
Thankfully Jest supports a concept of presets. By installing a single npm package in your SPFx project, all the tools, necessary versions & configurations are all set up for you. Which one are you interested in? Here are my three presets:
October 2019 Updates
This month I’ve made a few updates to all three presets based on some reports & research from the community. It’s great to see people using these presets and getting value from them! Thanks to Vincent & @fguicc for identifying and helping with the solution to a few problems.
Some changes were applied to all three projects, some are for specific projects. Let me break them down.
Updates all presets
I updated the TypeScript compiler configuration for all projects to include the "esModuleInterop": true compiler option. This has been identified as a fix for multiple issues when using the Jest TypeScript preprocessor ts-jest. One common one is that the CSS classes were not included in Jest React snapshots when testing the rendering of a component.
Updates to React presets
I also updated the versions for dependent packages, depending on the project you’re using. For instance, the React v15 preset was suddenly throwing a lot of TypeScript type declaration errors & TSLint errors.
The examples had some issues when it came to TSLint, so those were fixed. The declaration errors were due to more recent versions of TypeScript & Jest, so I changed the React 15 preset to use specific versions of Jest, ts-jest and other projects… make sure you include that –save-exact flag when installing this preset as the docs have been updated to show!
Outstanding issues
There is still one outstanding issue that’s giving me some fits… It’s best explained in issue #7 by JakeStanger. It basically boils down to how SPFx injects the localization string files a runtime. This is causing an issue when running tests or when using Fabric React components and so far, I haven’t figured out how to address it. If you’ve got an idea, jump in and provide a suggestion!
It’s still on my list to include example projects that can be used to test the presets as well as an automated CI/CD process. Coming soon!