Part 5 - Set up test suite for Typescript Vue components

Jest is a very popular and reliable test framework for javascript projects. It can work with Vue components with the help of vue-jest, and with Typescript files with the help of ts-jest.

Vue-test-utils offers a series of tools to interact with and retrieve information from Vue Components.

You may notice all these libraries were added in the package.json, as well as the configuration necessary for Jest to know where to find the test files.

Author: FRFlor

package.json

@@ -1,6 +1,7 @@
 {
     "private": true,
     "scripts": {
+        "test": "jest",
         "dev": "npm run development",
         "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
         "watch": "npm run development -- --watch",
@@ -10,20 +11,40 @@
         "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
     },
     "devDependencies": {
+        "@types/jest": "^24.0.11",
+        "@vue/test-utils": "^1.0.0-beta.29",
         "axios": "^0.18",
+        "babel-core": "^6.26.3",
         "bootstrap": "^4.0.0",
         "cross-env": "^5.1",
+        "jest": "^24.7.1",
         "jquery": "^3.2",
         "laravel-mix": "^4.0.7",
         "lodash": "^4.17.5",
         "popper.js": "^1.12",
         "resolve-url-loader": "^2.3.1",
         "sass": "^1.15.2",
         "sass-loader": "^7.1.0",
+        "ts-jest": "^24.0.2",
         "ts-loader": "^5.4.3",
         "typescript": "^3.4.5",
         "vue": "^2.5.17",
+        "vue-jest": "^3.0.4",
         "vue-property-decorator": "^8.1.0",
         "vue-template-compiler": "^2.6.10"
+    },
+    "jest": {
+        "moduleFileExtensions": [
+            "js",
+            "ts",
+            "json",
+            "vue"
+        ],
+        "transform": {
+            ".*\\.(vue)$": "vue-jest",
+            "^.+\\.tsx?$": "ts-jest"
+        },
+        "testURL": "http://localhost/",
+        "testRegex": "(/tests/js/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$"
     }
 }

tests/js/Unit/ExampleComponent.spec.js

@@ -0,0 +1,24 @@
+import {shallowMount, Wrapper} from '@vue/test-utils';
+import ExampleComponent from '../../../resources/js/components/ExampleComponent.vue';
+
+describe('ExampleComponent - Unit', () => {
+    let wrapper: Wrapper<ExampleComponent>;
+
+    const  mountWithName = (name: string) => {
+        wrapper =  shallowMount(ExampleComponent, {
+            propsData: {
+                userName: name,
+            }
+        });
+    };
+
+    test('It renders a given user name', () => {
+        mountWithName('Foobar');
+        expect(wrapper.text()).toContain('Foobar');
+    });
+
+    test('It writes the given name backwards', () => {
+        mountWithName('ABC');
+        expect(wrapper.text()).toContain('CBA');
+    });
+});