Failed parse using external template

I used external template like :

<template
  src="vue2-simplert-core/simplert.html">
</template>

Success when building production file using vue-loader@13.7.0. But unit test failed to run using vue-jest@1.4.0

Here some snippet of my Jest configuration :

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

Error that I got is :

ENOENT: no such file or directory, open '~/project/src/vue2-simplert-core/simplert.html'

if I look into error message, it because pointing to my project root folder instead of node_modules folder.

Is there any missing from my side ?

Thanks for all response 👍

[vladiiliev]

Hello guys. We have a project that is in a similar situation. This is part of our Webpack configuration (aliases section):

    resolve: {
        alias: {
            assets: path.join(process.cwd(), 'src/assets'),
            controllers: path.join(process.cwd(), 'src/controllers'),
            views: path.join(process.cwd(), 'src/views')
        }
    }

As we can see, each alias is a reference to the “src” directory. And this is how we use them in vue files:

<template>
    <div />
</template>

<script lang="ts" src="controllers/components/FieldClick.ts"></script>

OK, to use Jest we need to replicate the above case in a configuration. This is how it looks:

module.exports = {
    transform: {
        '^.+\\.[t|j]sx?$': '<rootDir>/node_modules/babel-jest',
        '^.+\\.vue$': '<rootDir>/node_modules/vue-jest'
    },
    modulePaths: ['<rootDir>/src'],
    moduleFileExtensions: ['ts', 'tsx', 'js', 'vue', 'json']
};

And the result after the transformation from “vue-jest” is: ENOENT, no such file or directory

Which is absolutely logical, judging by these lines of code in “vue-jest/lib/process”:

parts.script.content = fs.readFileSync(join(filePath, '..', parts.script.src), 'utf8')

To the authors: You need to rethink your code to cover cases like ours. moduleNameMapper is useless in the above case if you think it will be useful.

WORKAROUND

We created a file (vue-jest.js) that replicates the function from “vue-jest/lib/process” with the following content:

const process = require('vue-jest/lib/process');
const path = require('path');

module.exports = {
    process: (src, filePath, jestConfig) => {
        return process(src, path.join(jestConfig['modulePaths'][0], path.basename(filePath)), jestConfig);
    }
};

Then in the jest configuration, we just refer to this file:

transform: {
        '^.+\\.[t|j]sx?$': '<rootDir>/node_modules/babel-jest',
        '^.+\\.vue$': '<rootDir>/vue-jest.js'
    },

Now it works like a charm! I hope it helps someone.

[eddyerburgh]

This is a problem on our side we need to fix. At the moment, we only look for a src that is relative, not in node_modules

Thanks for bring it to my attention, I’ll look to get a fix in place 🙂