vire / jest-vue-preprocessor Goto Github PK

It feels a bit weird submitting an issue report against a feature for which I created a PR originally. Anyway...

It appears that TS support I hacked together originally is a bit flaky. It sometimes works and sometimes does not. Apparently, this has something to do with the fact that Vue.js dist contains different types of modules depending on how you import it, and the wrong type (CommonJS vs ESM) gets selected at runtime. TypeScript's compiler will make assumptions that don't hold true when the code is run. For example, it will assume that exports.default is defined by the module, when it's not, and so on.

Long story short, while you can write tests that work with TypeScript and Jest, the code may break when the same code is used with Webpack. I'm currently trying to hack together a workaround for this, but thus far, it's not looking very promising. It also feels wrong to hack around this issue as sooner or later community will realize that this issue is a thing, and may come up with their own solution that breaks this code.

For now, I suggest reverting the TS patches. I'll let you know if I have a promising fix some time in future.

Should search for a .babelrc file and/or the babel property in the package.json file instead of using hard-coded babel configuration.

tsc.transpileModule in function transformTs lost the param fileName

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request

Current behavior

filename --> module.tsx

real file name

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[x] support request

Current behavior

Fails with that errors:

$ npm test

> [email protected] test /home/r/w/webpack-test2
> jest

Failed to compile src with `tsc` at `vue-preprocessor`
 FAIL  tests/add.test.ts
  ● Test suite failed to run

    TypeError: Jest: a transform's `process` function must return a string, or an object with `code` key containing this string.
      
      at ScriptTransformer.transformSource (node_modules/jest-runtime/build/script_transformer.js:227:15)
      at Object.<anonymous> (tests/add.test.ts:6:15)

  console.info node_modules/vue/dist/vue.common.js:8248
    You are running Vue in development mode.
    Make sure to turn on production mode when deploying for production.
    See more tips at https://vuejs.org/guide/deployment.html

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.509s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

Expected behavior

Mormal completion of tests

Minimal reproduction of the problem with instructions
Minimal example here may be big) so I created minimal test example project.
Project contains vue app, and 2 type of tests. Testing .ts files and .vue componet.

https://gitlab.com/rokkerruslan/jest-ts-vue-test

What is the motivation / use case for changing the behavior?

I need testing as simple ts files and vue components files.

Please tell us about your environment:

npm 5.5.1

• jest-vue-preprocessor: 1.1.X

1.3.1

• Node version : [ OSX | Linux | Windows ]
  v9.0.0

• Platform: [ OSX | Linux | Windows ]
  Linux rpc 4.10.0-37-generic #41~16.04.1-Ubuntu SMP Fri Oct 6 22:42:59 UTC 2017 x86_64 x86_64 x86_64 GNU/Linux

Thanks for any asnwers!

expected 100% , but only got 93.75% ：

P.S.

• jest: ^19.0.2
• jest-vue-preprocessor: ^0.2.0,
• Node: 7.8

// Hello.spec.js
import Vue from 'vue'
import Hello from '@/components/Hello'

describe('Hello.vue', () => {
  it('should render correct contents', () => {
    const Constructor = Vue.extend(Hello)
    const vm = new Constructor().$mount()
    expect(vm.$el.querySelector('.hello h1').textContent)
      .toBe('Welcome to Your Vue.js App')
  })
})

// package.json
"jest": {
    "collectCoverage": true,
    "moduleNameMapper": {
      "src/components/([^\\.]*)$": "<rootDir>/src/components/$1.vue",
      "^vue$": "vue/dist/vue.common.js",
      "src/([^\\.]*)$": "<rootDir>/src/$1.vue",
      "(.*)/(.*)$": "$1/$2.vue"
    },
    "moduleFileExtensions": [
      "js",
      "vue"
    ],
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor"
    }
  },

Hello thanks for this preprocessor!

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[x ] support request

Current behavior
Vue Template Compiler is locked at 2.2.6. This is preventing running tests on my version of vue which is 2.3.3

Can i set that to at least 2.2.6 instead of exactly 2.2.6 and send you a PR for the new version requirement?

In package.json

    "vue-template-compiler": "2.2.6",

Expected behavior

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request

Current behavior

Multiple file components such as components/HelloWorld/ cannot import files
relatively in jest if the script is in a subfolder:

<script src="./script/index.js"></script>

Because inside the script, if we do the following:

import { greeter } from './lib/something'

Jest will throw the following error looking for lib/something because it
looks for the file relative to index.vue instead of script/index.js.

 FAIL  test/unit/specs/HelloWorld.spec.js
  ● Test suite failed to run

    Cannot find module './lib/something' from 'index.vue'
      
      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:191:17)
      at src/components/HelloWorld/index.vue:8:18
      at Object.<anonymous> (src/components/HelloWorld/index.vue:18:3)

Current fix is to not put index.js inside a subfolder. Alternatively, the following can be done:

<script>
import Component from './script/index';
export default Component;
</script>

Expected behavior

Files imported inside a script should be relative to the script path instead of the index.vue file.
The workaround shouldn't be necessary (or should be documented).

Minimal reproduction of the problem with instructions
I've created a test repo here

• Do npm install
• Running npm run start works just fine
• Running npm run test will throw the error

(I hope this is sufficient, and that my suspicion for origin of behaviour is correct)

What is the motivation / use case for changing the behavior?

Avoid using the workaround as it works as is with Webpack.

Please tell us about your environment:

• jest-vue-preprocessor: 1.1.X

    "jest-vue-preprocessor": "git+https://github.com/vire/jest-vue-preprocessor.git",

• Node version : [ OSX | Linux | Windows ]
  v9.3.0

• Platform: [ OSX | Linux | Windows ]
  Linux

Currently if you install this in a fresh Vue project and run your tests, you'll get an error about the following packages missing:

• vue-template-compiler
• vue-template-es2015-compiler

This is because they're marked as devDepedencies, so they don't get installed. I think these should be marked as peerDependencies or just plain dependencies.

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request

Current behavior

Line numbers are incorrect for template components. The tabs-headers only has 423 lines in it total.

Expected behavior

The line number should be somewhere below 423.

Minimal reproduction of the problem with instructions
I can reproduce this with a very simple template component with a failing test.

What is the motivation / use case for changing the behavior?

Will help debugging issues if the line numbers are correct.

Please tell us about your environment:

jest + babel + vue template

• jest-vue-preprocessor: 1.1.X

^1.4.0

• Node version : [ OSX | Linux | Windows ]
  10.3.0

• Platform: [ OSX | Linux | Windows ]
  Windows

I was getting a Failed to compile scr with babel at vue-preprocessor until I found out that the babel-plugin-transform-runtime package was missing, by adding the error to the console.log, and then just installed it as a dev dependency. I think it should be a dependency of jest-vue-preprocessor.

I'm trying to run Jest on a React app that I have which uses Vue.js for some components, but I keep running into an error that says Block-scoped declarations not yet supported outside strict mode. I've looked into issues filed on this repository, along with on Stack Overflow, with the same error, but nothing that I tried from those sources has worked. One solution that was presented was to put use strict at the top of my files, but since my project contains hundreds of files, I'd rather not do that. I'm posting here in the hope that I can finally find a solution. I am using the latest version of Jest, I have tried re-installing my node_modules folder, and I have run Jest with the --no-cache option with no success. Attached are what I believe are the relevant files. The complete text of the error:

 C:\Users\z003pudj\Documents\Project X\projectX-core>npm test

 > [email protected] test C:\Users\z003pudj\Documents\Project X\projectX-core
 > jest --config=./__tests__/jest.config

 FAIL  __tests__\sum.test.js
 ? Test suite failed to run

 SyntaxError: Block-scoped declarations (let, const, function, class) not yet
   supported outside strict mode

      at exports.runInThisContext (vm.js:53:16)
      at Module._compile (module.js:373:25)
      at Object.Module._extensions..js (module.js:416:10)
      at Module.load (module.js:343:32)
      at Function.Module._load (module.js:300:12)
      at Module.require (module.js:353:17)
      at require (internal\module.js:12:17)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        5.053s
Ran all test suites.
 console.log src\js\config.js:8
   INCLUDE_TESTING

  console.info node_modules\vue\dist\vue.runtime.common.js:6111
    You are running Vue in development mode.
    Make sure to turn on production mode when deploying for production.
    See more tips at https://vuejs.org/guide/deployment.html

npm ERR! Test failed.  See above for more details.`

Apologies for the .txt extensions. Couldn't upload the files otherwise.

sum.js.txt
package.json.txt
.babelrc.txt
sum.test.js.txt
webpack.config.dev.js.txt
jest.config.txt

By the way, vue-jest works fine. So please maybe either drop this plugin or merge it with vue-jest. Pity for devs to lose time trying to debug this.

I'm submitting a ... (check one with "x")

[x] bug report
[ ] feature request
[ ] support request

Current behavior
Report is not 100%

Expected behavior

It should be 100% and I should see two components

Minimal reproduction of the problem with instructions
I removed instabul from my list of plugins as advised in order to try to fix wrong code coverage and added mapCoverage: true to my jest config. What happened is : the same line appears as "untested" but also now one of my tests doesn't show up at all in the coverage report. 🤔

~/v/bcgdv-voting (master|●2✚3…) $ yarn list vue jest jest-vue-preprocessor babel-jest
yarn list v1.0.2
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
✨  Done in 0.90s.

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

~/v/bcgdv-voting (master|●2✚3…) $ yarn test
yarn test v1.0.2
$ jest --coverage
 PASS  src/components/Question/Question.spec.js
 PASS  src/components/QuestionsList/QuestionsList.spec.js

Test Suites: 2 passed, 2 total
Tests:       3 passed, 3 total
Snapshots:   2 passed, 2 total
Time:        1.551s
Ran all test suites.
--------------------------|----------|----------|----------|----------|----------------|
File                      |  % Stmts | % Branch |  % Funcs |  % Lines |Uncovered Lines |
--------------------------|----------|----------|----------|----------|----------------|
All files                 |    36.59 |    33.33 |      6.9 |    36.59 |                |
 api                      |    29.41 |        0 |        0 |    29.41 |                |
  index.js                |    29.41 |        0 |        0 |    29.41 |... 25,30,31,33 |
 components/QuestionsList |      100 |       50 |      100 |      100 |                |
  QuestionsList.vue       |      100 |       50 |      100 |      100 |             19 |
 store                    |    34.43 |      100 |     6.25 |    34.43 |                |
  actions.js              |       25 |      100 |        0 |       25 |... 39,40,41,43 |
  getters.js              |      100 |      100 |      100 |      100 |                |
  index.js                |      100 |      100 |      100 |      100 |                |
  mutation-types.js       |      100 |      100 |      100 |      100 |                |
  mutations.js            |        0 |      100 |        0 |        0 |... 35,36,37,40 |
--------------------------|----------|----------|----------|----------|----------------|
✨  Done in 3.83s.

QuestionList.vue:L19

      <v-btn
          large
          color="primary"
          :block="$vuetify.breakpoint.xsOnly"
          v-if="!maxPagesReached"
          @click="$store.dispatch('requestItems')">
        Load More Questions</v-btn>

and it's spec:

store.dispatch = jest.fn();
import Vue from 'vue';
import { mount } from 'vue-test-utils';
import QuestionsList from './QuestionsList';
import store from '@/store';

Vue.prototype.$vuetify = {
  load: (fn) => fn(),
  breakpoint: {}
};

describe('QuestionsList.spec.js', () => {
  let cmp;
  let template;
  
  beforeEach(() => {
    cmp = mount(QuestionsList, {
      store,
    });
    template = cmp.html();
  });
  
  it('has the expected html structure', () => {
    expect(template).toMatchSnapshot()
  });
  
  it('should emit 2 dispatch events', () => {
    expect(store.dispatch.mock.calls.length).toBe(2);
  });
  
});

Why is L19 of QuestionsList reported as uncovered and why's Question.vue disappearing from the report when Is add mapCoverage: true?

Here is the missing Question.vue component:

<style src="./question.scss" lang="scss"></style>

<template>
  <v-flex d-flex xs12 md6 xl4>
    <router-link :to="`${id}`" class="card-link card" tag="div">
      <v-card
          hover
          :class="[question.voted ? 'green darken-2 white--text' : 'blue-grey darken-1']">
        <v-toolbar dark>
          <v-toolbar-title
              :class="[$vuetify.breakpoint.xsOnly ? 'body-1 ml-3' : 'ml-3']"
          >
            {{ question.question }}
          </v-toolbar-title>
          <v-spacer></v-spacer>
          <v-chip v-if="question.voted" small class="hidden-sm-and-down">
            Voted
              <v-icon right>check</v-icon>
          </v-chip>
        </v-toolbar>
        <v-card-text primary-title>
          <div>
            <div class="headline"></div>
            <div>
              created {{ question.published_at | moment("from", "now") }}
            </div>
            <div>
              {{ question.choices.length }} choices
            </div>
            <v-chip v-if="question.voted" small class="hidden-md-and-up">
              Voted
              <v-icon right>check</v-icon>
            </v-chip>
          </div>
        </v-card-text>
      </v-card>
    </router-link>
  </v-flex>
</template>

<script>

  export default {
    name: 'question',
    props: [
      'question',
      'id',
    ],
  };
</script>

• jest-vue-preprocessor: 1.1.X

1.3.1

• Node version : [ OSX | Linux | Windows ]
  8.4.0
• Platform: [ OSX | Linux | Windows ]
  OSX

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[x] support request

Current behavior

I've used jest-vue-preprocessor since the start of my project to work with files. Recently, I've added process.env (using Webpack's define plugin) to my project, and it gives me the following error.

 FAIL  test/unit/specs/components/onboarding/RecordForm.spec.js
  ● Test suite failed to run

    <path>/Form.vue:3
    import _defineProperty from 'babel-runtime/helpers/defineProperty';
    ^^^^^^
    
    SyntaxError: Unexpected token import
      
      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)
      at Object.<anonymous> (test/unit/specs/components/Form.spec.js:6:19)
          at Generator.next (<anonymous>)

Expected behavior

Minimal reproduction of the problem with instructions
Relevant sections of

// package.json

"jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1"
    },
    "transform": {
      "^.+\\.(js)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor"
    },
    "mapCoverage": true,
    "snapshotSerializers": [
      "<rootDir>/node_modules/jest-serializer-vue"
    ],
    "testRegex": "test/unit/.+\\.spec.js$",
    "collectCoverageFrom": [
      "<rootDir>/src/**/*"
    ]
  }

// .babelrc

{
  "presets": [
    [
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": [
            "> 1%",
            "last 2 versions",
            "not ie <= 8"
          ]
        }
      }
    ],
    "stage-2"
  ],
  "plugins": [
    "transform-runtime"
  ],
  "env": {
    "test": {
      "plugins": [
        "istanbul",
        "transform-es2015-modules-commonjs"
      ]
    }
  }
}

What is the motivation / use case for changing the behavior?
Er I just want it to work

Please tell us about your environment:
Ubuntu 16.04, bash.

• jest-vue-preprocessor: 1.3.1

• Node version : 8.9.1

• Platform: Linux

As a side note, I've tried replacing jest-vue-preprocessor with vue-jest, and the transpilation process goes fine, which is why I'm assuming the error lies here and not in something else. However vue-jest has problems with test coverage reporting which I can't deal with either.

Submitting

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request

Current behavior
If you have a component without style tags, it disappears from the coverage.
Adding an empty style block fixes this.
Expected behavior
Should still show up in coverage even without <style> tag

Minimal reproduction of the problem with instructions
Take any starter project for jest-vue, add a single file component - delete the style tag, run coverage.

What is the motivation / use case for changing the behavior?
Less wtf moments ;)

• jest-vue-preprocessor: 1.1.X
  1.3.1

• Node version : [ OSX ]
  8

• Platform: [ OSX ]

This is not a big issue, just so if anyone else is pondering this - they can see why it's not working.

Also, removing mapCoverage from jest shows the missing file, but screws up the line obviously.

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[x] support request

Current behavior
Testing vue components with code splitting is throwing on the import

Minimal reproduction of the problem with instructions
Create a component that async loads other components:

<script>
    const Modal = () => import(/* webpackChunkName: "Modal" */ "@/pages/common/Modal.vue");

    export default {
        name: "TileEditModal",
        components: {
            Modal
        },
        data() {
            return 
        },
        methods: {
            test() {
                return true;
            }
        }
    }
</script>

Create a tests, upon running jest it throws an exception on the import

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request

Current behavior
First I generate a coverage json for a component, that has the js given with src attribute. After that I cannot use istanbul to generate html reports. I think the problem is, that in the source I have a separate vue and js file, but the coverage report is generated for the appended file. Istanbul says:
"TypeError: Cannot read property 'text' of undefined" in istanbul html js.

Expected behavior
To generate html reports from coverage json generated by jest

Minimal reproduction of the problem with instructions
jest --coverage

istanbul report html

Please tell us about your environment:
VS Code, yarn

• jest-vue-preprocessor: 1.1.X
  1.3.1

• Node version : [ OSX | Linux | Windows ]
  8.9.1

• Platform: [ OSX | Linux | Windows ]
  Windows

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request

Current behavior
This library uses find-babel-config to find the babel configuration. This is fine if the config is in .babelrc format, but not if it's in (the recommended) babel.config.js format. find-babel-config contains a pull request to support babel.config.js but it doesn't look like it will be merged any time soon.

Expected behavior
We should be able to use either format, especially as babel themselves recommend babel.config.js.

Minimal reproduction of the problem with instructions
Use the babel.config.js confguration as described here instead of .babelrc. The call to findBabelConfig won't work, and the transform will fail.

What is the motivation / use case for changing the behavior?
To use the recommended babel configuration format.

Please tell us about your environment:
node, macOS.

• jest-vue-preprocessor: 1.1.X
  1.4.0

• Node version : [ OSX | Linux | Windows ]
  6.4.1

• Platform: [ OSX | Linux | Windows ]
  OSX

Forking find-babel-config, applying the pending MR and depending on the fork might be a good way around this.

Version 10 of Node.js (code name Dubnium) has been released! 🎊

To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:

• Added the new Node.js version to your .travis.yml
• The new Node.js version is in-range for the engines in 1 of your package.json files, so that was left alone

If you’re interested in upgrading this repo to Node.js 10, you can open a PR with these changes. Please note that this issue is just intended as a friendly reminder and the PR as a possible starting point for getting your code running on Node.js 10.

Your Greenkeeper Bot 🌴

I'm submitting a ... (check one with "x")
Missing information in the changelog

[ X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request

Current behavior

N/A
Expected behavior

N/A
Minimal reproduction of the problem with instructions
N/A
What is the motivation / use case for changing the behavior?

I updated to the latest and my CI system broke because their node version is not supported. I think that in changelog the library should state that node version lesser than 8.9 are not supported anymore.

Please tell us about your environment:

N/A

• jest-vue-preprocessor:
  1.4.*

• Node version : [ OSX | Linux | Windows ]
  Lesser than 8.9
• Platform: [ OSX | Linux | Windows ]
  N/A

Hi, I'm having some trouble with processing vue files from npm package dependencies. Am I doing something wrong?

My current package.json config:

"jest": {
  "moduleFileExtensions": [ "js", "vue" ],
  "moduleNameMapper": {
    "^@(.*)$": "<rootDir>/src$1"
  },
  "testRegex": "jest\/.*",
  "transform": {
    "^.+\\.js$": "babel-jest",
    "^.+\\.vue$": "jest-vue-preprocessor"
  }
}

In my test, I have an import like this:

import Octicon from 'vue-octicon/components/Octicon.vue';
import 'vue-octicon/icons/x';
Vue.component('octicon', Octicon);

And when I run my tests, it complains about:

node_modules/vue-octicon/components/Octicon.vue:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<template>
                                                                                             ^
    SyntaxError: Unexpected token <
      
      at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:320:12)
      at Object.<anonymous> (test/jest/components/CartRow.test.js:3:16)

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[x] support request

Current behavior
Jest code coverage is apparently checking also tested CSS in the style tag

Expected behavior
Jest code coverage shouldn't consider the style tag, or even the template tag, as code to be covered because it is not part of the component logic.

Minimal reproduction of the problem with instructions
There's probably no need for a reproduction, the image should be fine

What is the motivation / use case for changing the behavior?
CSS is not part of the component logic

Please tell us about your environment:
Visual Studio Code
Yarn 1.5.1

• jest-vue-preprocessor: 1.1.X
  "jest-vue-preprocessor": "^1.3.1"

• Node version : [ OSX | Linux | Windows ]
  OSX, Node 8.9.1

• Platform: [ OSX | Linux | Windows ]
  OSX latest

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[X] support request

Current behavior
Tests fail when absolute path import is used

Expected behavior
All tests to pass (as they do when I replace the absolute path with the relative equivalent one).

Minimal reproduction of the problem with instructions
Just running tests with some component import. Only when using relative paths the test is able to import them:

import Gradient from '@/components/Gradient'     <--- this does not work
import Gradient from 'src/components/Gradient'   <--- this does not work
import Gradient from '../components/Gradient'    <--- this does

Console output:

 FAIL  src/components/Background/background.test.js
  ● Test suite failed to run

    Cannot find module '@/components/Gradient' from 'Background.vue'

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:179:17)
      at src/components/Background/Background.vue:167:17
      at Object.<anonymous> (src/components/Background/Background.vue:210:3)

Obviously, my import Component from @/components/Whatever works properly in my app.

Just in case, my jest object config from package.json:

  "jest": {
    "moduleFileExtensions": ["js", "vue"],
    "moduleNameMapper": {
      "src/components/([^\\.]*)$": "<rootDir>/src/components/$1.vue",
      "^vue$": "vue/dist/vue.common.js",
      "src/([^\\.]*)$": "<rootDir>/src/$1.vue",
      "(.*)/(.*)$": "$1/$2.vue"
    },
    "snapshotSerializers": [
      "jest-serializer-html"
    ],
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}"
    ],
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor"
    }
  }

Tried adding a new line in ModuleNameMapper: "@/([^\\.]*)$": "<rootDir>/src/$1.vue", but did not work. I'm not sure if that even make sense :)

I'm using vue-cli, so in webpack.base.conf.js there's the @ alias setup:

...
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  }

Please tell us about your environment:

• jest-vue-preprocessor: 1.0.1

• Node version : 8.1.2 (npm 5.3.0)

• Platform: OSX

Thanks for your time!

Vue's components allow you to use CSS Modules in your CSS (with module attribute on the style tag), and will provide a $style instance property to access the classes. This preprocessor does not account for CSS at all, so the $style property doesn't exist, so I get errors. Is there any way that you can see to support CSS modules?

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request

Current behavior
vue-template-compiler is a dependency

Expected behavior
It should be a peer dependency, so that users can choose which version of Vue they compile. If it's a dependency then they must use the Vue version that matches the vue-template-compiler version used by jest-vue-processor

What is the motivation / use case for changing the behavior?

I can't use this with vue 2.4.2. It would be better if I could update vue-template-compiler to whatever version I wanted.

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[x] support request

Current behavior
If a vue single file template contains lang="html"
It would actually fail to run it

I've found where it went wrong, it's in index.js, the part to detect the lang type for the template.
Currently it supports pug or resultHTML, and throwing other types away.

const extractHTML = (template, templatePath) => {

  // .......

  if (!template.lang || template.lang === 'resultHTML') {
    resultHTML = template.content;
  } else if (template.lang === 'pug') {
    resultHTML = require('pug').compile(template.content)();
  } else {
    throw templatePath + ': unknown <template lang="' + template.lang + '">';
  }

  return resultHTML;
};

Expected behavior
The lang="html" should be detected and use it.

Minimal reproduction of the problem with instructions

1. create a vue file with <template lang="html">
2. use vue-server-renderer's renderToString util to parse it.

What is the motivation / use case for changing the behavior?

https://github.com/vuejs/vue-loader/blob/master/docs/en/options.md#loaders

Since the html-loader itself actually exists, and it's used by vue-loader default to process lang="html"

And vue-cli add the lang="html" by default, I think it would be great to add different lang in a config file.
Please tell us about your environment:

npm: 5.5.1
other dependencies: jest jest-vue-preprocessor babel-jest jsdom vue-server-renderer

• jest-vue-preprocessor: 1.1.X
  "jest-vue-preprocessor": "^1.3.1"

• Node version : [ OSX | Linux | Windows ]
  node: 6.9.1
  OSX: 10.13.1

• Platform: [ OSX | Linux | Windows ]
  OSX: 10.13.1

I would love to discuss about what could be a great way to add this support for lang="html", and other langs used in vue-loader.

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request

Current behavior

When I try to use my single-file component, I get the following warning:

console.error node_modules/vue/dist/vue.js:482
  [Vue warn]: Failed to mount component: template or render function not defined.
      found in
      ---> <Vue$3>

Expected behavior

The component should work correctly.

Minimal reproduction of the problem with instructions
Create a single-file component:

<template>
  <div>
    <span>{{ message }}</span>
    <button @click="reset"></button>
  </div>
</template>

<script>
  export default {
    name: 'what',
    props: ['message', 'reset'],
  }
</script>

Import it inside a test and try to use it in a Vue app

Please tell us about your environment:

I'm using Jest 21.2.1, vue 2.4.4 (vue/dist/vue.js with the compiler), node 6.10.0 (also tried 8.6.0).

• jest-vue-preprocessor: 1.2.0

• Node version: macOS with node 6.10.0 / 8.6.0

• Platform: macOS

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[X] feature request
[ ] support request

Current behavior
There are no sourcemaps

Expected behavior
Sourcemaps should be generated using similar logic to vueify

What is the motivation / use case for changing the behavior?
Code coverage report is incorrect, I would like to use this preprocessor in the webpack vue-cli template, but we can't use it until correct source maps are generated.

• jest-vue-preprocessor: 1.X

I'm submitting a bug report

Current behavior

I'm having some trouble with processing vue files that import template in the src attribute:
Here is the error:

Test suite failed to run

TypeError: Cannot read property 'map' of undefined
      
at stringifyStaticRender (node_modules/jest-vue-preprocessor/index.js:83:69)
at Object.process (node_modules/jest-vue-preprocessor/index.js:99:25)

Expected behavior

Here is my index.vue:

<template src="./template.html"></template>
<script src="./script.js"></script>
<style scoped src="./style.css"></style>

• jest-vue-preprocessor: 1.0.1

• Node version : 8.1.2

I'm submitting a ... (check one with "x")

[ x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request

Current behavior
functional components error out with error ‘No script available to transform’.

Expected behavior
Should not try to read a script tag from a functional component since they don't have script tags

Minimal reproduction of the problem with instructions

Try to test a functional component with jest.

What is the motivation / use case for changing the behavior?
My build system won't let me push my code because these functional components are failing tests

Please tell us about your environment:
node version 8.9.4 latest jest and related utils, max osx

• jest-vue-preprocessor: 1.1.X
  The latest version

• Node version : [ OSX | Linux | Windows ]
  8.9.4

• Platform: [ OSX | Linux | Windows ]
  osx

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ x ] feature request
[ ] support request

Current behavior

package.json specifies peer deps for [email protected] and [email protected].

Expected behavior

There have been releases up to [email protected] and [email protected].

It would be nice if the peer dependencies allowed these minor versions instead of locking to minor versions 2.5.x and 1.6.x respectively.

What is the motivation / use case for changing the behavior?

Remove warnings during dep installation.

• jest-vue-preprocessor: 1.1.X

1.5.0

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[x ] support request

Current behavior

I npm installed the jest-vue-preprocessor package and the jest snapshot test runs properly on the vue framework; however, the application itself doesn't run. The app uses webpack.

If I change the babelrc presets configuration to {"modules": false}, the app runs properly, but the tests fail with the error SyntaxError: Unexpected token import.

With the babelrc presets configuration to {"modules": "commonjs"}, the tests run, but the app doesn't.

Expected behavior

I should be able to run the tests as well as the app itself.

Minimal reproduction of the problem with instructions
I run the command NODE_ENV=test jest --no-cache
Here is the "jest" section of my package.json:

"jest": {
    "moduleFileExtensions": [
      "js", "vue"
    ],
    "moduleNameMapper": {
      "src/components/(.*)$": "<rootDir>/src/components/$1.vue",
      "^vue$": "vue/dist/vue.common.js",
      "src": "<rootDir>/src",
      "assets": "<rootDir>/src/assets",
      "components": "<rootDir>/src/components"
    },
    "testMatch": [
      "**/test/snapshot/*.spec.js"
    ],
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor"
    },
    "transformIgnorePatterns": ["/node_modules/"]
  }

I'm running jest with --no-cache option.

Here's the babelrc file:

{
  "presets": [
    ["env", { "modules": "commonjs" }],
    "stage-2"
  ],
  "plugins": ["transform-runtime"],
  "comments": false,
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": [ "istanbul" ]
    }
  }
}

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

Atom editor, webpack package manager

• jest-vue-preprocessor: 1.1.X

jest-vue-preprocessor 1.0.1

• Node version : [ OSX | Linux | Windows ]
  Windows 7

• Platform: [ OSX | Linux | Windows ]
  Windows 7

I'm submitting a ... (check one with "x")

[] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request

Current behavior
npm install complains about version compatibility with:

npm install                                                                                                                                                                                                                                                    (sweb-resolve/synapse_web/static/webpack) 12:14:18
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/vue-template-compiler
npm ERR!   vue-template-compiler@"2.7.14" from the root project
npm ERR!   peerOptional vue-template-compiler@"^2.0.0" from @vue/[email protected]
npm ERR!   node_modules/@vue/cli-service
npm ERR!     dev @vue/cli-service@"~4.5.18" from the root project
npm ERR!     peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/[email protected]
npm ERR!     node_modules/@vue/cli-plugin-router
npm ERR!       @vue/cli-plugin-router@"^4.5.19" from @vue/[email protected]
npm ERR!     1 more (@vue/cli-plugin-vuex)
npm ERR!   2 more (@vue/test-utils, vue-jest)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vue-template-compiler@"2.6.x" from [email protected]
npm ERR! node_modules/jest-vue-preprocessor
npm ERR!   dev jest-vue-preprocessor@"^1.7.1" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/vue-template-compiler
npm ERR!   peer vue-template-compiler@"2.6.x" from [email protected]
npm ERR!   node_modules/jest-vue-preprocessor
npm ERR!     dev jest-vue-preprocessor@"^1.7.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Expected behavior
npm install works.

Minimal reproduction of the problem with instructions
package.json:

{
    "main": "webpack.mix.js",
    "private": true,
    "dependencies": {
      "vue": "2.7.14",
      "vue-template-compiler": "2.7.14",
      ...
    },
    "devDependencies": {
      "jest-vue-preprocessor": "^1.7.1",
      ...
    },
}

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• jest-vue-preprocessor: 1.7.1

• Node version : [ OSX | Linux | Windows ]

node -v                                                                                                                                                                                                                                                       
v14.20.0
npm -v                                                                                                                                                                                                                                                         (sweb-resolve/synapse_web/static/webpack) 12:31:54
8.6.0

• Platform: [ OSX | Linux | Windows ]
  macOS 13.2.1