How to do Jest Unit testing for Syncfusion Vue Components?
Overview
This article is about writing Jest unit test cases for Syncfusion Vue components.
Prerequisite
- Node
- NPM
- Vue CLI 2
Installing Node & NPM
For installing Node.js in your machine, download the LTS (Long Time Support) version of windows setup from the following link.
NPM (Node Package Manager) will be installed automatically along with Node.js setup.
Installing Vue CLI
To install Vue CLI and to know about other features of it, you can refer the following documentation.
npm install -g @vue/cli
Creating Vue Application with Unit Test
You can create Vue application with Unit testing template by Vue CLI using the following configurations.
vue create ej2-vue-jest
The above command will prompt you two options and select “Manual Select Feature” as follows.
Then, you must select “Unit Testing” as shown in the following image.
The command window prompt you to choose the Vue.js version and select Vue 2 version.
Now, select “ESLint with error prevention only” as shown in the following image.
Then, select “Lint and Fix on commit” based on your requirement.
You must select “Jest” as unit testing framework.
Now, select “In package.json” option for storing the configuration.
Integrating Syncfusion Vue Components
You can refer Syncfusion online documentation and demo site for including Syncfusion Vue components in the Vue application.
https://ej2.syncfusion.com/vue/documentation/introduction
HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<ejs-button class="test-btn" :content="btnContent"></ejs-button>
</div>
</template>
<script>
import Vue from 'vue';
import { ButtonPlugin } from '@syncfusion/ej2-vue-buttons';
Vue.use(ButtonPlugin);
export default {
name: 'HelloWorld',
props: {
msg: String,
btnContent: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>
App.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App" btnContent="Test Button"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
</style>
Unit Test
import { mount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'
describe('HelloWorld.vue', () => {
it('renders props.msg when passed', () => {
//Jest uses "jsdom" which do not have all functions/APIs of browser window object
window.crypto = jest.fn();
window.crypto.getRandomValues = jest.fn();
const msg = 'new message';
const btnContent = 'Jest Button';
const wrapper = mount(HelloWorld, {
propsData: { msg, btnContent }
})
const btn = wrapper.find('.test-btn');
console.log(btn.vm.content);
expect(btn.vm.content).toMatch(btnContent)
})
})
Conclusion
Now run “npm run test:unit” command for testing the application.
npm run test:unit
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ej2-vue-jest-846701347
Conclusion
I hope you enjoyed learning about how to do Jest Unit testing for Syncfusion Vue Components.
You can refer to our Vue feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Vue example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
