Merge pull request #382 from messenjer/feat/vitest

refactor: migrate to vitest

Author: mariusa

.eslintrc.js

@@ -4,7 +4,6 @@ module.exports = {
     'browser': true,
     'es6': true,
     'node': true,
-    'jest/globals': true,
     'vue/setup-compiler-macros': true,
   },
   extends: [
@@ -16,7 +15,6 @@ module.exports = {
   parserOptions: {
     ecmaVersion: 2021,
   },
-  plugins: ['jest'],
   rules: {
     'no-alert': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

jest.config.js

@@ -36,7 +36,7 @@
     "docs:deploy": "./scripts/deploy.sh",
     "test": "npm run test:lint && npm run test:unit",
     "test:lint": "npm run lint",
-    "test:unit": "jest",
+    "test:unit": "vitest",
     "prepare": "husky install && vite build",
     "publish": "npm publish --tag develop",
     "release": "standard-version"
@@ -51,7 +51,6 @@
     "@babel/core": "7.x.x",
     "@babel/plugin-transform-runtime": "7.x.x",
     "@babel/preset-env": "7.x.x",
-    "@testing-library/jest-dom": "5.x.x",
     "@types/bootstrap": "5.x.x",
     "@typescript-eslint/eslint-plugin": "5.x.x",
     "@typescript-eslint/parser": "5.x.x",
@@ -61,23 +60,21 @@
     "@vue/test-utils": "^2.0.0-rc.14",
     "eslint": "8.x.x",
     "eslint-config-prettier": "8.x.x",
-    "eslint-plugin-jest": "26.x.x",
     "eslint-plugin-vue": "8.x.x",
     "husky": "^7.0.2",
     "improved-yarn-audit": "3.x.x",
-    "jest": "^27.0.6",
+    "jsdom": "^19.0.0",
     "lint-staged": "12.x.x",
     "prettier": "^2.3.2",
     "rollup-plugin-visualizer": "5.x.x",
     "sass": "1.x.x",
     "standard-version": "^9.3.2",
-    "ts-jest": "^27.0.4",
     "typescript": "4.x.x",
     "vite": "2.x.x",
     "vite-plugin-dts": "1.x.x",
+    "vitest": "^0.10.4",
     "vue": "3.x.x",
-    "vue-router": "4.x.x",
-    "vue3-jest": "^27.0.0-alpha.2"
+    "vue-router": "4.x.x"
   },
   "repository": {
     "type": "git",

package.json

@@ -110,7 +110,7 @@ export default defineComponent({
     const inputClasses = getInputClasses(props)
     const labelClasses = getLabelClasses(props)
 
-    // TODO: make jest tests compatible with the v-focus directive
+    // TODO: make tests compatible with the v-focus directive
     if (props.autofocus) {
       onMounted(() => {
         input.value.focus()

src/components/BFormCheckbox/BFormCheckbox.vue

@@ -88,7 +88,7 @@ export default defineComponent({
     const attrs = getGroupAttr(props)
     const classes = getGroupClasses(props)
 
-    // TODO: make jest tests compatible with the v-focus directive
+    // TODO: make tests compatible with the v-focus directive
 
     return {
       attrs,

src/components/BFormCheckbox/BFormCheckboxGroup.vue

@@ -1,7 +1,8 @@
+import {describe, expect, it} from 'vitest'
 import {mount} from '@vue/test-utils'
 import {createContainer, waitNT} from '../../../tests/utils'
-import BFormCheckboxGroup from './BFormCheckboxGroup'
-import BFormCheckbox from './BFormCheckbox'
+import BFormCheckboxGroup from './BFormCheckboxGroup.vue'
+import BFormCheckbox from './BFormCheckbox.vue'
 
 const global = {components: {BFormCheckbox}}
 

src/components/BFormCheckbox/form-checkbox-group.spec.js

@@ -1,6 +1,8 @@
 import {mount} from '@vue/test-utils'
+import {afterEach, beforeEach, describe, expect, it, vitest} from 'vitest'
+
 import {createContainer, waitNT, waitRAF} from '../../../tests/utils'
-import BFormCheckbox from './BFormCheckbox'
+import BFormCheckbox from './BFormCheckbox.vue'
 
 describe('form-checkbox', () => {
   // --- Custom checkbox structure, class and attributes tests ---
@@ -1514,7 +1516,7 @@ describe('form-checkbox', () => {
     beforeEach(() => {
       // Mock `getBoundingClientRect()` so that the `isVisible(el)` test returns `true`
       // In our test below, all pagination buttons would normally be visible
-      Element.prototype.getBoundingClientRect = jest.fn(() => ({
+      Element.prototype.getBoundingClientRect = vitest.fn(() => ({
         width: 24,
         height: 24,
         top: 0,

src/components/BFormCheckbox/form-checkbox.spec.js

@@ -1,6 +1,8 @@
 import {mount} from '@vue/test-utils'
+import {afterEach, beforeEach, describe, expect, it, vitest} from 'vitest'
+
 import {createContainer, waitNT, waitRAF} from '../../../tests/utils'
-import BFormInput from './BFormInput'
+import BFormInput from './BFormInput.vue'
 
 describe('form-input', () => {
   it('has class form-control', async () => {
@@ -220,7 +222,7 @@ describe('form-input', () => {
   })
 
   it('renders text input when type not supported', async () => {
-    const warnHandler = jest.fn()
+    const warnHandler = vitest.fn()
 
     const wrapper = mount(BFormInput, {
       global: {
@@ -394,7 +396,7 @@ describe('form-input', () => {
   })
 
   it('emits a native focus event', async () => {
-    const spy = jest.fn()
+    const spy = vitest.fn()
     const wrapper = mount(BFormInput, {
       attrs: {
         onFocus: spy,
@@ -622,7 +624,7 @@ describe('form-input', () => {
 
   /* TODO: implement noWheel
   it('focused number input with no-wheel set to true works', async () => {
-    const spy = jest.fn()
+    const spy = vitest.fn()
     const wrapper = mount(BFormInput, {
       attachTo: createContainer(),
       props: {
@@ -650,7 +652,7 @@ describe('form-input', () => {
 
 
   it('focused number input with no-wheel set to false works', async () => {
-    const spy = jest.fn(() => {})
+    const spy = vitest.fn(() => {})
     const wrapper = mount(BFormInput, {
       attachTo: createContainer(),
       props: {
@@ -680,7 +682,7 @@ describe('form-input', () => {
 
 
   it('changing no-wheel after mount works', async () => {
-    const spy = jest.fn(() => {})
+    const spy = vitest.fn(() => {})
     const wrapper = mount(BFormInput, {
       attachTo: createContainer(),
       props: {
@@ -823,7 +825,7 @@ describe('form-input', () => {
 
   /* TODO: implement debounce
   it('"debounce" prop works', async () => {
-    jest.useFakeTimers()
+    vitest.useFakeTimers()
     const wrapper = mount(BFormInput, {
       props: {
         type: 'text',
@@ -853,7 +855,7 @@ describe('form-input', () => {
     expect(wrapper.emitted('input')[1][0]).toBe('ab')
 
     // Advance timer
-    jest.runOnlyPendingTimers()
+    vitest.runOnlyPendingTimers()
     // Should update the v-model
     expect($input.element.value).toBe('ab')
     // `v-model` update event should have emitted
@@ -911,7 +913,7 @@ describe('form-input', () => {
     expect(wrapper.emitted('input')[5][0]).toBe('abcd')
 
     // Advance timer
-    jest.runOnlyPendingTimers()
+    vitest.runOnlyPendingTimers()
     // Should update the v-model
     expect($input.element.value).toBe('abcd')
     // `v-model` update event should not have emitted new event
@@ -929,7 +931,7 @@ describe('form-input', () => {
 
     beforeEach(() => {
       // Mock `getBoundingClientRect()` so that the `isVisible(el)` test returns `true`
-      Element.prototype.getBoundingClientRect = jest.fn(() => ({
+      Element.prototype.getBoundingClientRect = vitest.fn(() => ({
         width: 24,
         height: 24,
         top: 0,

src/components/BFormInput/form-input.spec.js

@@ -82,7 +82,7 @@ export default defineComponent({
     const inputClasses = getInputClasses(props)
     const labelClasses = getLabelClasses(props)
 
-    // TODO: make jest tests compatible with the v-focus directive
+    // TODO: make tests compatible with the v-focus directive
     if (props.autofocus) {
       onMounted(() => {
         input.value.focus()

src/components/BFormRadio/BFormRadio.vue

@@ -82,7 +82,7 @@ export default defineComponent({
     const attrs = getGroupAttr(props)
     const classes = getGroupClasses(props)
 
-    // TODO: make jest tests compatible with the v-focus directive
+    // TODO: make tests compatible with the v-focus directive
 
     return {
       attrs,