Install and configure jest
-
We are using
typescriptin our project. To properly setupjestwe would need to installts-jestpackage as well.
$ npm install --save-dev jest ts-jest @types/jest git add -ugit commit -m 'install jest'-
Initialize our
ts-jestconfig.
$ npx ts-jest config:init -
Add
testscript inpackage.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.jsgit commit -m 'add jest config'
Configure jest for vue
-
To make jest and
vuework together, we will needvue-jestpackage. Recently it was split intovue2-jestandvue3-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 supportsjest >= 27.x. Also, for better testing experience withvuewe 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 -ugit commit -m 'install vue-jest and @vue/test-utils'
Add tests
mkdir -p tests/unittouch 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 -ugit 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.11which was fixed in2.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 -ugit 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
jestcannot resolve@/path. -
Update
jest.config.jsto fix this.
+ moduleNameMapper: { + '^@/(.*)$': '<rootDir>/src/$1', + }, git add -ugit 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 -ugit commit -m 'fix: using wrong env for jest'
Run tests in Github Actions
-
Rename
bulid.ymltoci.ymlto 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
- + git add -ugit commit -m 'setup github workflow to run tests'
Links
- https://jestjs.io
- https://kulshekhar.github.io/ts-jest/
- https://github.com/vuejs/vue-jest
- https://www.npmjs.com/package/vue3-jest
- https://next.vue-test-utils.vuejs.org/installation/
- https://github.com/lmiller1990/vtu-next-demo
Top comments (1)
Excellent article. Greetings from Colombia 💪🏽