Vite with Vue.js 3 + Tests

Vite is a super fast development server developed by the creator of Vue.js Evan You. The default templates for Vue comes without the necessary packages and configuration for testing. Fortunately there's not that much to do to add that after the init.

Unit-Testing

For Unit-Testing we need the jest-Testrunner as well as the vue-test-utils to be able to mount components for testing.

npm install jest vue-jest@next @vue/vue-test-utils@next --save-dev

We need the next-versions of vue-test and vue-test-utils because they're the only ones supporting Vue.js 3 so far.

After the installation is finished we need to configure jest to run vue-tests:

// jest.config.js
modules.exports {
  moduleFileExtensions: [
    'js',
    'ts',
    'json',
    'vue'
  ],
  transform: {
    '^.+\\.vue$': 'vue-jest'
  }
}

And last but not least we modify the scripts-section of our package.json to add a test-command:

// package.json
...
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview",
        "test": "jest test"
    }
...

In this example I used a separate test-directory for my tests. Of course it's possible to keep the unit-tests under the src-directory and modify the command accordingly.

E2E-Testing

To check the whole application in a browser we can use end-to-end testing. Cypress was used in Vue-CLI as a built-in feature for this purpose. To add Cypress to Vite we need to install the following packages:

npm install cypress start-server-and-test --save-dev

The start-server-and-test library enables automatic start and stop of the development server in order to run cypress-tests.

Next we need to tell cypress where the tests are located and on which URL the application under test is running:

// cypress.json
{
  "baseUrl": "http://localhost:3000",
  "integrationFolder": "e2e",
  "pluginsFile": false,
  "supportFile": false,
  "video": false
}

We use a separate folder for e2e-tests to not interfere with the unit-tests.

And finally we configure the test-command for e2e-tests in the package.json:

// package.json
{
  ...
  "scripts": {
    ...
    "test:e2e": "start-server-and-test dev http-get://localhost:3000 cypress",
    "cypress": "cypress run"
  },
  ...
}

The start-server-and-test command takes three arguments:

• dev the script-command to start the development-server
• **http-get://localhost:3000 the url and method to prope the development-server
• cypress the script-name that is run for the tests after the development-server is up and answering

Typescript-Support

To enable testing on the Typescript template we need to add two additional packages:

npm install ts-test @types/jest --save-dev

Jest by default doesn't understand Typescript-Files so we need to add ts-test to the jest.config.js:

// jest.config.js
modules.exports {
  moduleFileExtensions: [
    'js',
    'ts',
    'json',
    'vue'
  ],
  transform: {
    '^.+\\.ts$': 'ts-jest',
    '^.+\\.vue$': 'vue-jest'
  }
}

In the Typescript-Config we have to add the jest- and cypress-types to the compilerOptions:

// tsconfig.json
{
  "compilerOptions": {
    ...
    "types": ["vite/client", "@types/jest", "cypress"],
    ...
  },
  ...
}

Conclusion

Vite is a super-fast development server especially for Vue.js 3 with loads of special starter templates. In this post I showed, how testing can be added to the default-templates. Cypress and Jest are my default goto options but i'm sure to swap them out for other options like Mocha and Jasmine should not be a big problem.