Menu
I want to test an already existing Vue-CLI 3 project. I haven't initialized the testing preset when I was creating the project. I have searched, but haven't found any suitable results. I read the documentation also, but it said to add testing when creating the project.
881
The CLI ( @vue/cli ) is a globally installed npm package and provides the vue command in your terminal. It provides the ability to quickly scaffold a new project via vue create . You can also manage your projects using a graphical user interface via vue ui .
Let’s create a Vue app called alligator-test. Choose the default preset at the prompt (hit the enter key). After that, run the following command to add our testing dependencies ( @vue/cli-plugin-unit-jest and @vue/test-utils ): Next, modify your project’s package.json file to have an entry in scripts which says "test": "jest".
For unit testing Vue projects, VueJS created a utility project for testing Vue apps. So, the utilities will create the configuration for running tests. We can test any Vue project in Karma, Jest or Mocha + webpack.
Vue CLI has built-in support of adding Jest and Mocha tests while creating with vue-cli. If you select either of them, it will add configurations required for testing while creating a new Vue project.
In the test file, Vue Test Utils should be imported first, and we also need to import the vue component we want to test. The example code is as below. When import Vue Test Utils, mount or shallowMount should be imported. They both could be used to wrap vue components and render them when testing. These two method work similarly.
From your project root directory, enter the following command to add @vue/test-utils and jest:
vue add unit-jest The command output should look similar to this:
$ vue add unit-jest 📦 Installing @vue/cli-plugin-unit-jest... + @vue/[email protected] added 282 packages from 167 contributors, removed 2 packages and audited 42205 packages in 9.693s found 63 low severity vulnerabilities run `npm audit fix` to fix them, or `npm audit` for details ✔ Successfully installed plugin: @vue/cli-plugin-unit-jest 🚀 Invoking generator for @vue/cli-plugin-unit-jest... 📦 Installing additional dependencies... added 12 packages from 11 contributors, updated 1 package, moved 4 packages and audited 42427 packages in 7.895s found 64 low severity vulnerabilities run `npm audit fix` to fix them, or `npm audit` for details ✔ Successfully invoked generator for plugin: @vue/cli-plugin-unit-jest The following files have been updated / added: jest.config.js tests/unit/.eslintrc.js tests/unit/example.spec.js package-lock.json package.json You should review these changes with git diff and commit them. I was successful with the following plugin:
@vue/cli-plugin-unit-jest ([https://www.npmjs.com/package/@vue/cli-plugin-unit-jest)
I installed it, from the root folder, using the command:
vue add unit-jest The command already adds an entry to my package.json file:
"scripts": { ... "test:unit": "vue-cli-service test:unit", ... }, If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
