In my previous post that talks about SharePoint Framework Unit Tests - TypeScript, the Enzyme tests were not a part of it.
Jest allows you to perform the test against the TypeScript files only but not to cover the React part (
.tsx files). To perform the React tests it is necessary to add another framework in addition to Jest - Enzyme.
How do these kinds of tests work? Thanks to Enzyme, you can isolate, manipulate and simulate output tests against your React Components'. In other words, Enzyme generates a "fake" DOM to inject your component and manipulate it.
This post is the continuity of SharePoint Framework Unit Tests - TypeScript
- SharePoint Framework : 1.11.0
- NodeJS: 10.x
The minimal setup to use Enzyme to perform the tests against your React files is:
- Sample based on the existing Web Part created on the post SharePoint Framework Unit Tests - TypeScript
- For this example, you can keep the default React file located into
- Rather than creating a folder named test, I suggest you create a test file in the same location as the React (
.tsx) one; create a file
**.test.tsxwith this content:
Before configuring and executing the unit tests, it is necessary to install the Enzyme Framework packages, that allow to run the React unit tests:
The versions of the packages are very important with a SPFx solution (v1.11.0)
- If you reuse the same configuration as the previous post (SharePoint Framework Unit Tests - TypeScript), you can launch the tests with the bash command below:
- If you launch the tests, this error should occur: