Introduction:
I have been working on SPFx projects since long and during the development I feel component testing is more important than the deployment. Manual testing involves people and time – and it might be difficult to manage the project when the code grows.
To speed up the development process for any SPFx solution/project we should have test cases to test the component rendering which can help to develop new components and also ensures the integrity of the existing functionality. I am going to explain how to use Jest for SPFx component which dramatically speeds up the process of running your tests.
Why it is required?
- The code is well designed with less technical depth, making it more extensible and flexible to changes.
- If any change occurs, it can be easily testing the solution for regression in no time
- Better way to backup the business logic within the solution against someone willing to change the code with no business knowledge and no clue how it should work.
- Bugs can be identified earlier (before the deployment)
How it works:
We have plenty of testing frameworks available to test our SPFx code and Jest testing framework is a best fit as its very easy to setup
“Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!”
Prerequisites:
To set up a project to use Jest, will use the popular tool Enzyme by Airbnb for testing the component rendering.
There are multiple packages we need to install to run our tests for the rendering components:
- enzyme
- enzyme-adapter-react-16
- jest
- identity-obj-proxy: allows you to test SASS / LESS / CSS imports
- react-test-renderer
- ts-jest: TypeScript preprocessor with sourcemap support for Jest
Let’s get started:
Create SPFx Web Part
- Open a command prompt. Create a directory for SPFx solution.
- Navigate to the above-created directory.
- Run the Yeoman SharePoint Generator to create and scaffold the solution.
- Yeoman generator will present you with the wizard by asking questions about the solution to be created.
- Once the scaffolding process is done – lock down the project dependencies version: npm shrinkwrap
- Packages needs to install:
- Enzyme is a set of test utilities created for React (developed by Airbnb). Enzyme makes it easy to assert, manipulate your components’ output. Run below command on the command prompt:
npm install enzyme enzyme-adapter-react-16 react-test-renderer @types/enzyme –save-dev –save-exact
- Jest supports asserts, mocking, code coverage, coverage threshold for continuous deployment, and summary report. Run below command on the command prompt:
npm install jest jest-junit ts-jest @types/jest –save-dev –save-exact
- identity-obj-proxy allows to test SASS / LESS / CSS imports. Run below command on the command prompt:
npm install identity-obj-proxy –save-dev –save-exact
Note: Run the following command to install all at once:
npm i enzyme enzyme-adapter-react-16 react-test-renderer @types/enzyme identity-obj-proxy jest jest-junit ts-jest @types/jest
- Open the solution in Visual Studio code using:
code .
Configure Jest with SPFx
Open the package.json file.
Under the “Scripts” section for “test” configuration, replace “gulp test” with “jest”.
Add “jest” configuration after “devDependencies”.
Add/Create Tests in SPFx WebPart
If you want to write some test yourself, you will have to go through a couple of steps.
Open Visual Studio Code and create new folder “test” under “src\webparts\spFxJestTestWp”. Add new file called “SPFxJest.test.ts”
Run Test Cases:
On the command prompt and run the below command to execute the test cases.
npm test
Note: Keep in mind to add ID for your root ‘DIV’ in SpFxJestTestWp.tsx file under render method.
i.e: <div className={ styles.spFxJestTestWp } id=”SPFxJestTest”>
This will be used in “SPFxJest.test.ts” file as :
it(‘should root web part element exists’, () => {
// define the css selector
let cssSelector: string = ‘#SPFxJestTest’;
Kirti Prajapati 