DEV Community

Cover image for Creating vite vue ts template: Setup Jest
Sardorbek Imomaliev
Sardorbek Imomaliev

Posted on • Updated on

Creating vite vue ts template: Setup Jest

Install and configure jest

  1. 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
    
  2. git add -u

  3. git commit -m 'install jest'

  4. Initialize our ts-jest config.

    $ npx ts-jest config:init
    
  5. 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"
    
  6. git add package.json jest.config.js

  7. git commit -m 'add jest config'

Configure jest for vue

  1. 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
    
  2. Update jest.config.js

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

  4. git commit -m 'install vue-jest and @vue/test-utils'

Add tests

  1. mkdir -p tests/unit
  2. touch tests/unit/HelloWorld.spec.ts
  3. 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)
    +  })
    +})
    
  4. git add -u

  5. git commit -m 'add test'

  6. Run test.

    $ npm run test
    

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

  1. 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.
    
  2. This is due to a bug in version 2.0.0-rc.11 which was fixed in 2.0.0-rc.12.

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

    $ npm install --save-dev @vue/test-utils@2.0.0-rc.12
    
  4. git add -u

  5. 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'

  1. 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.
    
  2. This issue occurs because jest cannot resolve @/ path.

  3. Update jest.config.js to fix this.

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

  5. git commit -m "fix: jest can't find @/ path"

Fix ReferenceError: document is not defined

  1. 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.
    
  2. As the error message suggests, we could fix this error by updating jest.config.js

    -  testEnvironment: 'node',
    +  testEnvironment: 'jsdom',
    
  3. git add -u

  4. git commit -m 'fix: using wrong env for jest'

Run tests in Github Actions

  1. Rename bulid.yml to ci.yml to be more general on contents of this workflow.

    $ git mv .github/workflows/{build,ci}.yml
    
  2. 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
    
  3. 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)
    
  4. git add -u

  5. git commit -m 'setup github workflow to run tests'

Links

Project

GitHub logo imomaliev / vue-ts

Vite + Vue + TypeScript template

Top comments (1)

Collapse
 
andercard profile image
Andersson Mesa

Excellent article. Greetings from Colombia 💪🏽