jest-vue-preprocessor

A locoslab/vue-typescript-jest JavaScript port to allow Jest load .vue files in tests. This package supports both ES6 (Babel) and TypeScript.

Portions both preprocessors are heavily based vueify (Copyright (c) 2014-2016 Evan You).

Installation

1. add package you your project

   • yarn add --dev jest-vue-preprocessor or npm install --saveDev jest-vue-preprocessor

2. modify package.json's jest section by adding/editing moduleFileExtensions and transform properites:

   "jest": {
     "moduleFileExtensions": [
       "js",
       "vue"
     ],
     "mapCoverage": true,
     "transform": {
       "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
       ".*\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor"
     }
   }

3. Start writing test that can import *.vue components - see example ./tests/index.spec.js

4. Profit!

   Customization

5. non-relative component imports - you properly set jest's moduleMapper option - see #25

   Contributing guide

   License: MIT

Changelog

All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

1.7.1 (2020-02-09)

Bug Fixes

• package: update vue-property-decorator to version 8.3.0 (15aa2ba)
• transform uses placeholderPattern: false (#163) (e73fb5b)

1.7.0 (2019-10-11)

Features

• deps: Move typescript to peerDependencies (#145) (d5b4143)

1.6.0 (2019-10-10)

1.4.0 (2018-03-14)

• Support for Functional Components (#50) (c0c0590), closes #50

Features

• deps: Bump dependency versions (#59) (0b86495)

BREAKING CHANGES

• none, but in the future $el should be defined, as it can't be used for testing if it's undefined

• fix(test): behaves differently locally

test behaves differently on travis-ci than on my local machine, so now there is a test to document that

• none

• fix(test): typeof didn't work

tried to use typeof, decided to use casting

no breaking changes

• fix(testing): removed context

context is needed for mounting functional components but not as an option for a render function

no breaking changes

• fix(testing): iie -> function

was passing an expression not a function to onClick handler

no breaking changes

• fix(testing): properly call props.onClick

• need to pass props in context object to Vue.compile

• need '@click="props.onClick('stuff')" VS '@click="() => props.onClick('stuff')"

No breaking changes

• test(local): can't reproduce locally

can't reproduce $el.querySelector being defined locally, yet on travis-ci it's defined. Without it being defined I can't debugger and figure out what the mock function isn't being called.

• none; objeys all test criteria except for testing that mockFn was called