I want to use Vue Testing Library in my Nuxt.js
app. But straight after installing the package, launching a test triggers this error:
'vue-cli-service' is not recognized as an internal or external command, operable program or batch file.
This is presumably because Nuxt.js
does not use vue-cli-service
.
Despite that, is there a simple way to use Vue Testing Library
with Nuxt.js
?
It sounds like you might have an NPM script that includes
vue-cli-service
(as shown below), but that's intended for Vue CLI scaffolded projects:However, you could setup Vue Testing Library using one of the methods outlined below.
Setup on new project
When generating a new Nuxt project, select Jest for testing, and install Vue Testing Library on top of that:
Scaffold a Nuxt project with
create-nuxt-app
, and select Jest at theTesting framework
prompt:Sample output:
Install Vue Testing Library (v5 required for Nuxt 2):
Run tests with the
test
NPM script (scaffolded from step 1):Setup on existing Nuxt project
For an already existing Nuxt project that has no testing framework, mimic the
jest
template from@nuxt/create-nuxt-app
to add Vue Testing Library support:Install the prerequisite NPM packages:
Add an NPM script to run Jest CLI:
Add a Jest config:
Add a Babel config:
Create a
test
directory, containing the example test file shown below (taken from Vue Testing Library example). Note the location of the test files can be configured with thetestMatch
ortestRegex
setting injest.config.js
.Example component:
Example test:
Run tests with the
test
NPM script (added in step 2):GitHub demo