Mixing
Jest + Vue - SyntaxError: Unexpected token <
0
I'm trying to add testing to my Electron + Vue2 application written in TypeScript using ts-Jest/ Jest and Chai. However when I try and run the simple test I wrote to try and make sure Jest is working correctly I'm now running into the issue of Jest seemingly not liking the fact that I'm importing the template of the component I'm testing as can be seen in the Error. When I try and search for things related to this I'm not having much luck and a lot of it points to "Unexpected token import" which is a problem I've already fixed.
If anyone has any insight or knowledge on how I can get the test to not freak out over importing HTML that would be amazing because I'm stumped and the documentation doesn't point to anything helpful it seems.
Error:
$ npm run test
> app@1.0.0 test C:UsersdanielDesktopappapp
> jest --detectOpenHandles
FAIL src/app/features/app-window/app-window.component.spec.ts
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
C:UsersdanielDesktopappappsrcappfeaturesapp-application-contentapp-application-content.component.html:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<webview-component v-if="src"
^
SyntaxError: Unexpected token <
2 | import Component from 'vue-class-component'
3 | import { Prop, Watch } from 'vue-property-decorator'
> 4 | import Template from './app-application-content.component.html'
| ^
5 |
6 | import * as qs from 'qs'
7 | import { INameValue } from '../../../contracts/Core'
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
at Object.<anonymous> (src/app/features/app-application-content/app-application-content.component.ts:4:1)
at Object.<anonymous> (src/app/features/app-content/app-content.component.ts:9:1)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 12.924s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! app@1.0.0 test: `jest --detectOpenHandles`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the app@1.0.0 test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:UsersdanielAppDataRoamingnpm-cache_logs2018-11-21T14_25_23_427Z-debug.log
jest.config.js
module.exports = {
preset: 'ts-jest/presets/js-with-ts',
testEnvironment: 'node',
verbose: true,
moduleDirectories: ['node_modules', 'src'],
modulePaths: ['<rootDir>/src', '<rootDir>/node_modules'],
moduleFileExtensions: ['js', 'ts', 'json', 'node'],
transformIgnorePatterns: ['node_modules/(?!(bootstrap-vue)/)'],
testPathIgnorePatterns: [
'/build/',
'/config/',
'/data/',
'/dist/',
'/node_modules/',
'/test/',
'/vendor/'
],
globals: {
'ts-jest': {
tsConfig: './src/app/tsconfig.json'
},
NODE_ENV: 'test'
}
}
tsconfig.json
{
"compilerOptions": {
"allowJs": true,
"outDir": "./built/",
"sourceMap": true,
"strict": true,
"moduleResolution": "node",
"target": "ES2017",
"experimentalDecorators": true,
"noImplicitAny": false,
"emitDecoratorMetadata": true,
"allowSyntheticDefaultImports": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"esModuleInterop": true,
"lib": ["es2017", "dom"],
"include": [
"**/*",
"../types/**/*",
"../../node_modules/bootstrap-vue/**/*",
"../../node_modules/electron/**/*"
]
}
}
app-window.component.spec.ts
import { expect } from 'chai'
import 'jest'
import { appWindowComponent } from './app-window.component'
const appWindowComponent = new appWindowComponent()
describe('Test: Set Title Function', () => {
it('should set the variable title to the passed variable', () => {
const title = 'this is a test'
appWindowComponent.setTitle(title)
expect(appWindowComponent.title).to.equal(title)
})
})
typescript vue.js vuejs2 automated-tests jestjs
asked Nov 21 '18 at 15:28
Daniel TurcichDaniel Turcich
3771424
add a comment |
0
I'm trying to add testing to my Electron + Vue2 application written in TypeScript using ts-Jest/ Jest and Chai. However when I try and run the simple test I wrote to try and make sure Jest is working correctly I'm now running into the issue of Jest seemingly not liking the fact that I'm importing the template of the component I'm testing as can be seen in the Error. When I try and search for things related to this I'm not having much luck and a lot of it points to "Unexpected token import" which is a problem I've already fixed.
If anyone has any insight or knowledge on how I can get the test to not freak out over importing HTML that would be amazing because I'm stumped and the documentation doesn't point to anything helpful it seems.
Error:
$ npm run test
> app@1.0.0 test C:UsersdanielDesktopappapp
> jest --detectOpenHandles
FAIL src/app/features/app-window/app-window.component.spec.ts
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
C:UsersdanielDesktopappappsrcappfeaturesapp-application-contentapp-application-content.component.html:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<webview-component v-if="src"
^
SyntaxError: Unexpected token <
2 | import Component from 'vue-class-component'
3 | import { Prop, Watch } from 'vue-property-decorator'
> 4 | import Template from './app-application-content.component.html'
| ^
5 |
6 | import * as qs from 'qs'
7 | import { INameValue } from '../../../contracts/Core'
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
at Object.<anonymous> (src/app/features/app-application-content/app-application-content.component.ts:4:1)
at Object.<anonymous> (src/app/features/app-content/app-content.component.ts:9:1)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 12.924s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! app@1.0.0 test: `jest --detectOpenHandles`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the app@1.0.0 test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:UsersdanielAppDataRoamingnpm-cache_logs2018-11-21T14_25_23_427Z-debug.log
jest.config.js
module.exports = {
preset: 'ts-jest/presets/js-with-ts',
testEnvironment: 'node',
verbose: true,
moduleDirectories: ['node_modules', 'src'],
modulePaths: ['<rootDir>/src', '<rootDir>/node_modules'],
moduleFileExtensions: ['js', 'ts', 'json', 'node'],
transformIgnorePatterns: ['node_modules/(?!(bootstrap-vue)/)'],
testPathIgnorePatterns: [
'/build/',
'/config/',
'/data/',
'/dist/',
'/node_modules/',
'/test/',
'/vendor/'
],
globals: {
'ts-jest': {
tsConfig: './src/app/tsconfig.json'
},
NODE_ENV: 'test'
}
}
tsconfig.json
{
"compilerOptions": {
"allowJs": true,
"outDir": "./built/",
"sourceMap": true,
"strict": true,
"moduleResolution": "node",
"target": "ES2017",
"experimentalDecorators": true,
"noImplicitAny": false,
"emitDecoratorMetadata": true,
"allowSyntheticDefaultImports": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"esModuleInterop": true,
"lib": ["es2017", "dom"],
"include": [
"**/*",
"../types/**/*",
"../../node_modules/bootstrap-vue/**/*",
"../../node_modules/electron/**/*"
]
}
}
app-window.component.spec.ts
import { expect } from 'chai'
import 'jest'
import { appWindowComponent } from './app-window.component'
const appWindowComponent = new appWindowComponent()
describe('Test: Set Title Function', () => {
it('should set the variable title to the passed variable', () => {
const title = 'this is a test'
appWindowComponent.setTitle(title)
expect(appWindowComponent.title).to.equal(title)
})
})
typescript vue.js vuejs2 automated-tests jestjs
asked Nov 21 '18 at 15:28
Daniel TurcichDaniel Turcich
3771424
add a comment |
0
0
0
I'm trying to add testing to my Electron + Vue2 application written in TypeScript using ts-Jest/ Jest and Chai. However when I try and run the simple test I wrote to try and make sure Jest is working correctly I'm now running into the issue of Jest seemingly not liking the fact that I'm importing the template of the component I'm testing as can be seen in the Error. When I try and search for things related to this I'm not having much luck and a lot of it points to "Unexpected token import" which is a problem I've already fixed.
If anyone has any insight or knowledge on how I can get the test to not freak out over importing HTML that would be amazing because I'm stumped and the documentation doesn't point to anything helpful it seems.
Error:
$ npm run test
> app@1.0.0 test C:UsersdanielDesktopappapp
> jest --detectOpenHandles
FAIL src/app/features/app-window/app-window.component.spec.ts
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
C:UsersdanielDesktopappappsrcappfeaturesapp-application-contentapp-application-content.component.html:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<webview-component v-if="src"
^
SyntaxError: Unexpected token <
2 | import Component from 'vue-class-component'
3 | import { Prop, Watch } from 'vue-property-decorator'
> 4 | import Template from './app-application-content.component.html'
| ^
5 |
6 | import * as qs from 'qs'
7 | import { INameValue } from '../../../contracts/Core'
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
at Object.<anonymous> (src/app/features/app-application-content/app-application-content.component.ts:4:1)
at Object.<anonymous> (src/app/features/app-content/app-content.component.ts:9:1)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 12.924s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! app@1.0.0 test: `jest --detectOpenHandles`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the app@1.0.0 test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:UsersdanielAppDataRoamingnpm-cache_logs2018-11-21T14_25_23_427Z-debug.log
jest.config.js
module.exports = {
preset: 'ts-jest/presets/js-with-ts',
testEnvironment: 'node',
verbose: true,
moduleDirectories: ['node_modules', 'src'],
modulePaths: ['<rootDir>/src', '<rootDir>/node_modules'],
moduleFileExtensions: ['js', 'ts', 'json', 'node'],
transformIgnorePatterns: ['node_modules/(?!(bootstrap-vue)/)'],
testPathIgnorePatterns: [
'/build/',
'/config/',
'/data/',
'/dist/',
'/node_modules/',
'/test/',
'/vendor/'
],
globals: {
'ts-jest': {
tsConfig: './src/app/tsconfig.json'
},
NODE_ENV: 'test'
}
}
tsconfig.json
{
"compilerOptions": {
"allowJs": true,
"outDir": "./built/",
"sourceMap": true,
"strict": true,
"moduleResolution": "node",
"target": "ES2017",
"experimentalDecorators": true,
"noImplicitAny": false,
"emitDecoratorMetadata": true,
"allowSyntheticDefaultImports": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"esModuleInterop": true,
"lib": ["es2017", "dom"],
"include": [
"**/*",
"../types/**/*",
"../../node_modules/bootstrap-vue/**/*",
"../../node_modules/electron/**/*"
]
}
}
app-window.component.spec.ts
import { expect } from 'chai'
import 'jest'
import { appWindowComponent } from './app-window.component'
const appWindowComponent = new appWindowComponent()
describe('Test: Set Title Function', () => {
it('should set the variable title to the passed variable', () => {
const title = 'this is a test'
appWindowComponent.setTitle(title)
expect(appWindowComponent.title).to.equal(title)
})
})
typescript vue.js vuejs2 automated-tests jestjs
asked Nov 21 '18 at 15:28
Daniel TurcichDaniel Turcich
3771424
I'm trying to add testing to my Electron + Vue2 application written in TypeScript using ts-Jest/ Jest and Chai. However when I try and run the simple test I wrote to try and make sure Jest is working correctly I'm now running into the issue of Jest seemingly not liking the fact that I'm importing the template of the component I'm testing as can be seen in the Error. When I try and search for things related to this I'm not having much luck and a lot of it points to "Unexpected token import" which is a problem I've already fixed.
If anyone has any insight or knowledge on how I can get the test to not freak out over importing HTML that would be amazing because I'm stumped and the documentation doesn't point to anything helpful it seems.
Error:
$ npm run test
> app@1.0.0 test C:UsersdanielDesktopappapp
> jest --detectOpenHandles
FAIL src/app/features/app-window/app-window.component.spec.ts
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
C:UsersdanielDesktopappappsrcappfeaturesapp-application-contentapp-application-content.component.html:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<webview-component v-if="src"
^
SyntaxError: Unexpected token <
2 | import Component from 'vue-class-component'
3 | import { Prop, Watch } from 'vue-property-decorator'
> 4 | import Template from './app-application-content.component.html'
| ^
5 |
6 | import * as qs from 'qs'
7 | import { INameValue } from '../../../contracts/Core'
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
at Object.<anonymous> (src/app/features/app-application-content/app-application-content.component.ts:4:1)
at Object.<anonymous> (src/app/features/app-content/app-content.component.ts:9:1)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 12.924s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! app@1.0.0 test: `jest --detectOpenHandles`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the app@1.0.0 test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:UsersdanielAppDataRoamingnpm-cache_logs2018-11-21T14_25_23_427Z-debug.log
jest.config.js
module.exports = {
preset: 'ts-jest/presets/js-with-ts',
testEnvironment: 'node',
verbose: true,
moduleDirectories: ['node_modules', 'src'],
modulePaths: ['<rootDir>/src', '<rootDir>/node_modules'],
moduleFileExtensions: ['js', 'ts', 'json', 'node'],
transformIgnorePatterns: ['node_modules/(?!(bootstrap-vue)/)'],
testPathIgnorePatterns: [
'/build/',
'/config/',
'/data/',
'/dist/',
'/node_modules/',
'/test/',
'/vendor/'
],
globals: {
'ts-jest': {
tsConfig: './src/app/tsconfig.json'
},
NODE_ENV: 'test'
}
}
tsconfig.json
{
"compilerOptions": {
"allowJs": true,
"outDir": "./built/",
"sourceMap": true,
"strict": true,
"moduleResolution": "node",
"target": "ES2017",
"experimentalDecorators": true,
"noImplicitAny": false,
"emitDecoratorMetadata": true,
"allowSyntheticDefaultImports": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"esModuleInterop": true,
"lib": ["es2017", "dom"],
"include": [
"**/*",
"../types/**/*",
"../../node_modules/bootstrap-vue/**/*",
"../../node_modules/electron/**/*"
]
}
}
app-window.component.spec.ts
import { expect } from 'chai'
import 'jest'
import { appWindowComponent } from './app-window.component'
const appWindowComponent = new appWindowComponent()
describe('Test: Set Title Function', () => {
it('should set the variable title to the passed variable', () => {
const title = 'this is a test'
appWindowComponent.setTitle(title)
expect(appWindowComponent.title).to.equal(title)
})
})
typescript vue.js vuejs2 automated-tests jestjs
typescript vue.js vuejs2 automated-tests jestjs
asked Nov 21 '18 at 15:28
Daniel TurcichDaniel Turcich
3771424
asked Nov 21 '18 at 15:28
Daniel TurcichDaniel Turcich
3771424
asked Nov 21 '18 at 15:28
Daniel TurcichDaniel Turcich
3771424
asked Nov 21 '18 at 15:28
Daniel TurcichDaniel Turcich
3771424
asked Nov 21 '18 at 15:28
Daniel TurcichDaniel Turcich
3771424
3771424
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
After sleuthing around I found the answer here
New jest.config.js
module.exports = {
preset: 'ts-jest/presets/js-with-ts',
testEnvironment: 'node',
verbose: true,
moduleDirectories: ['node_modules', 'src'],
modulePaths: ['<rootDir>/src', '<rootDir>/node_modules'],
moduleFileExtensions: ['js', 'ts', 'json', 'node', 'html'],
transform: {
'^.+\.html$': '<rootDir>/config/htmlLoader.js'
},
transformIgnorePatterns: ['node_modules/(?!(bootstrap-vue)/)'],
testPathIgnorePatterns: [
'/build/',
'/config/',
'/data/',
'/dist/',
'/node_modules/',
'/test/',
'/vendor/'
],
globals: {
'ts-jest': {
tsConfig: './src/app/tsconfig.json'
},
NODE_ENV: 'test'
}
}
Note
transform: {
'^.+\.html$': '<rootDir>/config/htmlLoader.js'
},
moduleFileExtensions: ['js', 'ts', 'json', 'node', 'html'],
Html Loader file
const htmlLoader = require('html-loader')
module.exports = {
process(src, filename, config, options) {
return htmlLoader(src)
}
}
This seemingly has worked as I'm now getting a new error :)
answered Nov 21 '18 at 19:50
Daniel TurcichDaniel Turcich
3771424
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53415363%2fjest-vue-syntaxerror-unexpected-token%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
After sleuthing around I found the answer here
New jest.config.js
module.exports = {
preset: 'ts-jest/presets/js-with-ts',
testEnvironment: 'node',
verbose: true,
moduleDirectories: ['node_modules', 'src'],
modulePaths: ['<rootDir>/src', '<rootDir>/node_modules'],
moduleFileExtensions: ['js', 'ts', 'json', 'node', 'html'],
transform: {
'^.+\.html$': '<rootDir>/config/htmlLoader.js'
},
transformIgnorePatterns: ['node_modules/(?!(bootstrap-vue)/)'],
testPathIgnorePatterns: [
'/build/',
'/config/',
'/data/',
'/dist/',
'/node_modules/',
'/test/',
'/vendor/'
],
globals: {
'ts-jest': {
tsConfig: './src/app/tsconfig.json'
},
NODE_ENV: 'test'
}
}
Note
transform: {
'^.+\.html$': '<rootDir>/config/htmlLoader.js'
},
moduleFileExtensions: ['js', 'ts', 'json', 'node', 'html'],
Html Loader file
const htmlLoader = require('html-loader')
module.exports = {
process(src, filename, config, options) {
return htmlLoader(src)
}
}
This seemingly has worked as I'm now getting a new error :)
answered Nov 21 '18 at 19:50
Daniel TurcichDaniel Turcich
3771424
add a comment |
0
After sleuthing around I found the answer here
New jest.config.js
module.exports = {
preset: 'ts-jest/presets/js-with-ts',
testEnvironment: 'node',
verbose: true,
moduleDirectories: ['node_modules', 'src'],
modulePaths: ['<rootDir>/src', '<rootDir>/node_modules'],
moduleFileExtensions: ['js', 'ts', 'json', 'node', 'html'],
transform: {
'^.+\.html$': '<rootDir>/config/htmlLoader.js'
},
transformIgnorePatterns: ['node_modules/(?!(bootstrap-vue)/)'],
testPathIgnorePatterns: [
'/build/',
'/config/',
'/data/',
'/dist/',
'/node_modules/',
'/test/',
'/vendor/'
],
globals: {
'ts-jest': {
tsConfig: './src/app/tsconfig.json'
},
NODE_ENV: 'test'
}
}
Note
transform: {
'^.+\.html$': '<rootDir>/config/htmlLoader.js'
},
moduleFileExtensions: ['js', 'ts', 'json', 'node', 'html'],
Html Loader file
const htmlLoader = require('html-loader')
module.exports = {
process(src, filename, config, options) {
return htmlLoader(src)
}
}
This seemingly has worked as I'm now getting a new error :)
answered Nov 21 '18 at 19:50
Daniel TurcichDaniel Turcich
3771424
add a comment |
0
0
0
After sleuthing around I found the answer here
New jest.config.js
module.exports = {
preset: 'ts-jest/presets/js-with-ts',
testEnvironment: 'node',
verbose: true,
moduleDirectories: ['node_modules', 'src'],
modulePaths: ['<rootDir>/src', '<rootDir>/node_modules'],
moduleFileExtensions: ['js', 'ts', 'json', 'node', 'html'],
transform: {
'^.+\.html$': '<rootDir>/config/htmlLoader.js'
},
transformIgnorePatterns: ['node_modules/(?!(bootstrap-vue)/)'],
testPathIgnorePatterns: [
'/build/',
'/config/',
'/data/',
'/dist/',
'/node_modules/',
'/test/',
'/vendor/'
],
globals: {
'ts-jest': {
tsConfig: './src/app/tsconfig.json'
},
NODE_ENV: 'test'
}
}
Note
transform: {
'^.+\.html$': '<rootDir>/config/htmlLoader.js'
},
moduleFileExtensions: ['js', 'ts', 'json', 'node', 'html'],
Html Loader file
const htmlLoader = require('html-loader')
module.exports = {
process(src, filename, config, options) {
return htmlLoader(src)
}
}
This seemingly has worked as I'm now getting a new error :)
answered Nov 21 '18 at 19:50
Daniel TurcichDaniel Turcich
3771424
After sleuthing around I found the answer here
New jest.config.js
module.exports = {
preset: 'ts-jest/presets/js-with-ts',
testEnvironment: 'node',
verbose: true,
moduleDirectories: ['node_modules', 'src'],
modulePaths: ['<rootDir>/src', '<rootDir>/node_modules'],
moduleFileExtensions: ['js', 'ts', 'json', 'node', 'html'],
transform: {
'^.+\.html$': '<rootDir>/config/htmlLoader.js'
},
transformIgnorePatterns: ['node_modules/(?!(bootstrap-vue)/)'],
testPathIgnorePatterns: [
'/build/',
'/config/',
'/data/',
'/dist/',
'/node_modules/',
'/test/',
'/vendor/'
],
globals: {
'ts-jest': {
tsConfig: './src/app/tsconfig.json'
},
NODE_ENV: 'test'
}
}
Note
transform: {
'^.+\.html$': '<rootDir>/config/htmlLoader.js'
},
moduleFileExtensions: ['js', 'ts', 'json', 'node', 'html'],
Html Loader file
const htmlLoader = require('html-loader')
module.exports = {
process(src, filename, config, options) {
return htmlLoader(src)
}
}
This seemingly has worked as I'm now getting a new error :)
answered Nov 21 '18 at 19:50
Daniel TurcichDaniel Turcich
3771424
answered Nov 21 '18 at 19:50
Daniel TurcichDaniel Turcich
3771424
answered Nov 21 '18 at 19:50
Daniel TurcichDaniel Turcich
3771424
answered Nov 21 '18 at 19:50
Daniel TurcichDaniel Turcich
3771424
3771424
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53415363%2fjest-vue-syntaxerror-unexpected-token%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
