Posted on Jul 31, 2021 • Edited on Aug 4, 2021

Creating vite vue ts template: Setup Jest

Install and configure jest

We are using typescript in our project. To properly setup jest we would need to install ts-jest package as well.
```
$ npm install --save-dev jest ts-jest @types/jest 
```
git add -u
git commit -m 'install jest'
Initialize our ts-jest config.
```
$ npx ts-jest config:init 
```

Add test script in package.json

 "format": "prettier --write .", - "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue" + "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue", + "test": "jest"

git add package.json jest.config.js
git commit -m 'add jest config'

Configure jest for vue

To make jest and vue work together, we will need vue-jest package. Recently it was split into vue2-jest and vue3-jest (we will use this one), which are currently in alpha. But we're still going to use it because this is the only version that supports jest >= 27.x. Also, for better testing experience with vue we will install @vue/test-utils -

official testing utility library for Vue.js
```
$ npm install --save-dev vue3-jest@27.0.0-alpha.2 @vue/test-utils@next 
```

Update jest.config.js

 testEnvironment: 'node', + transform: { + '^.+\\.vue$': 'vue3-jest', + }, + moduleFileExtensions: ['json', 'js', 'jsx', 'ts', 'tsx', 'vue']

git add -u
git commit -m 'install vue-jest and @vue/test-utils'

Add tests

mkdir -p tests/unit
touch tests/unit/HelloWorld.spec.ts

Add our test in tests/unit/HelloWorld.spec.ts

+import { shallowMount } from '@vue/test-utils' +import HelloWorld from '@/components/HelloWorld.vue' + +describe('HelloWorld.vue', () => { + it('renders props.msg when passed', () => { + const msg = 'new message' + const wrapper = shallowMount(HelloWorld, { + props: { msg }, + }) + expect(wrapper.text()).toMatch(msg) + }) +})

git add -u
git commit -m 'add test'
Run test.
```
$ npm run test 
```

Fix `error TS7016: Could not find a declaration file for module '@vue/test-utils'`

If running tests causes this.

$ npm run test  > vite-vue-typescript-starter@0.0.0 test > jest  FAIL tests/unit/HelloWorld.spec.ts ● Test suite failed to run tests/unit/HelloWorld.spec.ts:1:30 - error TS7016: Could not find a declaration file for module '@vue/test-utils'. '/path/to/project/vue-ts/node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js' implicitly has an 'any' type.  Try `npm i --save-dev @types/vue__test-utils` if it exists or add a new declaration (.d.ts) file containing `declare module '@vue/test-utils';`  1 import { shallowMount } from '@vue/test-utils' ~~~~~~~~~~~~~~~~~ Test Suites: 1 failed, 1 total Tests: 0 total Snapshots: 0 total Time: 3.376 s Ran all test suites.

This is due to a bug in version 2.0.0-rc.11 which was fixed in 2.0.0-rc.12.

Update to newer version of @vue/test-utils.

$ npm install --save-dev @vue/test-utils@2.0.0-rc.12

git add -u
git commit -m 'fix: TS7016 missing declaration file for @vue/test-utils by updating it to 2.0.0-rc.12'

Fix `Cannot find module '@/components/HelloWorld.vue' from 'tests/unit/HelloWorld.spec.ts'`

If running tests causes.

$ npm run test  > vite-vue-typescript-starter@0.0.0 test > jest  FAIL tests/unit/HelloWorld.spec.ts ● Test suite failed to run Cannot find module '@/components/HelloWorld.vue' from 'tests/unit/HelloWorld.spec.ts' 1 | import { shallowMount } from '@vue/test-utils'  > 2 | import HelloWorld from '@/components/HelloWorld.vue'  | ^ 3 |  4 | describe('HelloWorld.vue', () => {  5 | it('renders props.msg when passed', () => {  at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:311:11)  at Object.<anonymous> (tests/unit/HelloWorld.spec.ts:2:1)  Test Suites: 1 failed, 1 total Tests: 0 total Snapshots: 0 total Time: 2.735 s Ran all test suites.

This issue occurs because jest cannot resolve @/ path.
- https://kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping
- https://jestjs.io/docs/configuration#modulenamemapper-objectstring-string--arraystring

Update jest.config.js to fix this.

+ moduleNameMapper: { + '^@/(.*)$': '<rootDir>/src/$1', + },

git add -u
git commit -m "fix: jest can't find @/ path"

Fix `ReferenceError: document is not defined`

If running tests causes.

$ npm run test  > vite-vue-typescript-starter@0.0.0 test > jest  FAIL tests/unit/HelloWorld.spec.ts HelloWorld.vue ✕ renders props.msg when passed (2 ms) ● HelloWorld.vue › renders props.msg when passed  The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.  Consider using the "jsdom" test environment. ReferenceError: document is not defined  5 | it('renders props.msg when passed', () => {  6 | const msg = 'new message'  > 7 | const wrapper = shallowMount(HelloWorld, {  | ^ 8 | props: { msg }, 9 | }) 10 | expect(wrapper.text()).toMatch(msg) at mount (node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:7640:14) at Object.shallowMount (node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:7852:12)  at Object.<anonymous> (tests/unit/HelloWorld.spec.ts:7:21)  Test Suites: 1 failed, 1 total Tests: 1 failed, 1 total Snapshots: 0 total Time: 4.061 s Ran all test suites.

As the error message suggests, we could fix this error by updating jest.config.js
```
- testEnvironment: 'node', + testEnvironment: 'jsdom', 
```
git add -u
git commit -m 'fix: using wrong env for jest'

Run tests in Github Actions

Rename bulid.yml to ci.yml to be more general on contents of this workflow.
```
$ git mv .github/workflows/{build,ci}.yml 
```

Update .github/workflow/ci.yml

-name: Node.js CI +name: CI   on: push: @@ -28,6 +28,7 @@ jobs: cache: 'npm' - run: npm ci - run: npm run build + - run: npm run test

Update badge in README.md

-![build](https://github.com/imomaliev/vue-ts/actions/workflows/build.yml/badge.svg) +![ci](https://github.com/imomaliev/vue-ts/actions/workflows/ci.yml/badge.svg)