Comments (11)
Also : if the .vue
file contains the full template, but the JS is still referenced via a <script>
tag, it also fails.
We had to copy the code of this package and have our own function
var fs = require('fs');
const customFreddie = (src, filePath) => {
var output = src
//console.log("\n\n\n\n\n\n\n\n\n\n\n" +filePath + "\n\n\n\n\n\n\n")
// const vueFileName = path.basename(filePath)
const dirName = path.dirname(filePath)
var attribute = 'src'
var regex = new RegExp("<script?\\w+(?:\\s+(?:" + attribute + "=\"([^\"]*)\")|[^\\s>]+|\\s+)*>","gi")
var matches
while ( matches = regex.exec(src) )
{
if (matches[0] != '<script>') {
let jsFileName = matches[1]
let jsCode = fs.readFileSync(path.resolve(dirName, jsFileName), 'utf8')
//console.log('\n\n\n\n\n\n\n\n\n\n'+jsCode+'\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n')
output += '<script>' + jsCode + '</script>'
}
}
return output
}
Sure, we hope to have the time to PR this repository with this code one day
from jest-vue-preprocessor.
@jpvincent I'll take a look in upcoming days, I was OoO for a week so need to reconcile first, but as it's an easy fix that shouldn't be an issue.
from jest-vue-preprocessor.
+1. Having the same issue
from jest-vue-preprocessor.
+1. Having the same issue
from jest-vue-preprocessor.
The vue-loader source code would serve as a better example on how to solve this issue.
See here for the html solution and here for the js solution. There should be no need for regex checking at least, and it should be relatively easy to put the contents of the referenced files back in one file and continue as before.
from jest-vue-preprocessor.
I actually Created a fix ...
/* eslint-env node */
const fs = require('fs');
const path = require('path');
const vueCompiler = require('vue-template-compiler');
const vueNextCompiler = require('vue-template-es2015-compiler');
const babelCore = require('babel-core');
const findBabelConfig = require('find-babel-config');
const tsc = require('typescript');
const crypto = require('crypto');
const getActualSource = (src, file, returnObj = true) => {
const { script, template } = vueCompiler.parseComponent(src, { pad: true });
if (script !== null && script.content === '' && script.src !== '') {
script.content = fs.readFileSync(path.resolve(path.dirname(file), script.src), 'utf8');
}
if (template !== null && template.content === '' && template.src !== '') {
template.content = fs.readFileSync(path.resolve(path.dirname(file), template.src), 'utf8');
}
if (returnObj) {
return { script, template };
}
return `${script !== null ? script.content : ''}${template !== null ? template.content : ''}`;
};
function buildCacheKey(file) {
const files = [file];
return files.reduce(
(src, fileName) => src + fs.readFileSync(fileName)
);
}
const createCacheKey = transformFile => {
const cacheKey = buildCacheKey(transformFile);
return (src, file, configString, options) => {
return crypto
.createHash('md5')
.update(cacheKey)
.update(getActualSource(src, file, false) + file + configString)
.update(options && options.instrument ? 'instrument' : '')
.digest('hex');
};
};
// Blah Blah Blah ... existing code stuff
module.exports = {
process(src, filePath) {
// code copied from https://github.com/locoslab/vue-typescript-jest/blob/master/preprocessor.js
// LICENSE MIT
// @author https://github.com/locobert
// heavily based on vueify (Copyright (c) 2014-2016 Evan You)
const { script, template } = getActualSource(src, filePath);
const transformedScript = script ? transforms[script.lang || 'babel'](script.content) : '';
let render;
let staticRenderFns;
if (template) {
const HTML = extractHTML(template, filePath);
const res = HTML && vueCompiler.compile(HTML);
render = stringifyRender(res.render);
staticRenderFns = stringifyStaticRender(res.staticRenderFns);
}
return generateOutput(transformedScript, render, staticRenderFns);
},
getCacheKey: createCacheKey(__filename)
};
Note that in order for this to work ... I had to write the getCacheKey function to update if src files are changed.
I can't help more than this ... but feel free to look at this comment all you want :)
from jest-vue-preprocessor.
@djwglpuppy Could you copy the whole code here? thx
from jest-vue-preprocessor.
@grofzero ... the code omitted is the code currently in the index.js file ... so everything between the imports and the exports. Sorry I canβt do more than that . Hope that helps
from jest-vue-preprocessor.
@djwglpuppy I just could'n find the generateOutput function anywhere
from jest-vue-preprocessor.
@grofzero ... looks like they refactored (though are not supporting src yet? ) . Here is the older file with that function
https://github.com/vire/jest-vue-preprocessor/blob/cd27677520697910be1a15d457e1d2d1fbc0cd02/index.js
from jest-vue-preprocessor.
@djwglpuppy It still doesn't support src, and thank you very much:)
from jest-vue-preprocessor.
Related Issues (20)
- find-babel-config is basically abandonware, and doesn't support babel.config.js
- Upgrade for peer deps vue-template-compiler, vue-template-es2015-compiler HOT 4
- lost the param fileName
- Supoort vue 2.7.x
- Problem getting jest to work with vue and webpack HOT 6
- vue-template-compiler should be a peer dependency HOT 1
- No sourcemapping HOT 3
- Failed to mount component: template or render function not defined HOT 1
- mapCoverage:true produces misleading Line in coverage report (wrong sourcemaps)
- TypeError: Jest: a transform's `process` function must return a string, HOT 7
- Vue Components do not appear in code coverage if there is no style tag HOT 1
- Coverage problem for Vue component with src attribute
- not recognizing lang="html" (Error: unknown <template lang="html">) HOT 2
- Unexpected token import HOT 4
- Relative imports in multi-file-components do not work in subfolders
- Can't Handle Functional Components HOT 6
- Changelog should highlight breaking change about node engine HOT 2
- Style tag in SFC should not result in Jest coverage results
- Version 10 of node.js has been released
- Line numbers aren't correct
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jest-vue-preprocessor.