https://github.com/vire/jest-vue-preprocessor

Preprocessor that allows importing of .vue files in jest tests
https://github.com/vire/jest-vue-preprocessor

jest preprocessor vuejs

Last synced: 6 days ago
JSON representation

Preprocessor that allows importing of .vue files in jest tests

• Host: GitHub
• URL: https://github.com/vire/jest-vue-preprocessor
• Owner: vire
• License: mit
• Created: 2016-12-02T20:15:45.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-08T15:51:22.000Z (about 2 years ago)
• Last Synced: 2024-12-06T21:54:50.186Z (2 months ago)
• Topics: jest, preprocessor, vuejs
• Language: JavaScript
• Size: 4.54 MB
• Stars: 130
• Watchers: 5
• Forks: 27
• Open Issues: 45
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# jest-vue-preprocessor

[![Greenkeeper badge](https://badges.greenkeeper.io/vire/jest-vue-preprocessor.svg)](https://greenkeeper.io/)

[![Build Status](https://travis-ci.org/vire/jest-vue-preprocessor.svg?branch=master)](https://travis-ci.org/vire/jest-vue-preprocessor) [![npm version](https://badge.fury.io/js/jest-vue-preprocessor.svg)](https://badge.fury.io/js/jest-vue-preprocessor) [![codecov](https://codecov.io/gh/vire/jest-vue-preprocessor/branch/master/graph/badge.svg)](https://codecov.io/gh/vire/jest-vue-preprocessor) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

A [locoslab/vue-typescript-jest](https://github.com/locoslab/vue-typescript-jest) JavaScript port to allow Jest load [.vue files](https://vue-loader.vuejs.org/en/) in tests. This package supports both ES6 (Babel) and TypeScript.

Portions both preprocessors are heavily based [vueify](https://github.com/vuejs/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:

      ```javascript

      "jest": {

        "moduleFileExtensions": [

          "js",

          "vue"

        ],

        "mapCoverage": true,

        "transform": {

          "^.+\\.js$": "/node_modules/babel-jest",

          ".*\\.(vue)$": "/node_modules/jest-vue-preprocessor"

        }

      }

      ```

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

  4.  Profit!

  ### Customization

  * non-relative component imports - you properly set jest's `moduleMapper` option - see [#25](https://github.com/vire/jest-vue-preprocessor/issues/25)

  ### [Contributing guide](https://github.com/vire/jest-vue-preprocessor/blob/master/CONTRIBUTING.md)

  ### License: MIT