Running Jest tests in Vue.js

Question

Basically, the component isn't getting compiled, so I get an Unexpected token < error when it runs into <template>

I've run the following commands:

$ npm install --save-dev jest
$ npm install --save-dev vue-jest
$ npm install --save-dev vue-test-utils

and I've out the following in package.json:

"scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js",
    "test": "jest"
  },

...

"jest": {
    "unmockedModulePathPatterns": [
        "<rootDir>/node_modules/vue"
    ],
    "moduleFileExtensions": [
        "js",
        "vue"
    ],
    "scriptPreprocessor": "index.js"
}

I created a __test__ folder in the root directory with a simple test:

const Vue = require("vue");
const VueTestUtils = require("vue-test-utils");

Vue.config.debug = true;
Vue.config.async = false;

Vue.use(VueTestUtils.install);

import Hello from '../src/components/Hello.vue'

const Constructor = Vue.extend(Hello)
const vm = new Constructor().$mount()

describe('initial test', () => {
  it('should be 1', () => {
    expect(1).toBe(1)
  })
})

I recently got this error as well, and not quite sure how to configure Vue.js so it will run using the compiler-included build:

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

Been looking around for a while, so any help would be appreciated

You should check this page, it explains the differences and how to setup runtime and full versions vuejs.org/v2/guide/installation.html — Corentin PRUNE
– Corentin PRUNE, Commented Apr 1, 2017 at 8:24
Thanks, I read a bunch of the guide but completely skipped this after installing by npm install vue vue-cli — gazayas
– gazayas, Commented Apr 2, 2017 at 1:13
Still no luck though after configuring the webpack build files, i'll update if I make progress — gazayas
– gazayas, Commented Apr 2, 2017 at 1:13

Jamel Toms · Accepted Answer · 2018-10-08 21:23:49Z

2

You need to use a Jest transform to transform Jest Vue files. A Jest transformer is a synchronous function, that takes the file and path as input and outputs transpiled code.

I maintain a npm package that does it for you - vue-jest. npm install --save-dev vue-jest

You need to add a jest section to your package.json (or in a seperate file with --config). Your config should look something like this:

  "jest": {
  "moduleFileExtensions": [
    "js",
    "json",
    "vue"
  ],
  "transform": {
    "^.+\\.js$": "babel-jest",
    ".*\\.(vue)$": "vue-jest"
  }
}

This tells jest to use jest-vue as a transform for files with a .vue extension.

You can see a working repo using Vue Test Utils here - https://github.com/eddyerburgh/vue-test-utils-jest-example

edited Oct 8, 2018 at 21:23

Jamel Toms

4,5852 gold badges29 silver badges27 bronze badges

answered Sep 3, 2017 at 10:25

Edward

5,2482 gold badges31 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Running Jest tests in Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related