Jest + Vue - SyntaxError: Unexpected token <

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)

  })

})

asked Nov 21 '18 at 15:28

Daniel Turcich

3771424

add a comment |

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)

  })

})

asked Nov 21 '18 at 15:28

Daniel Turcich

3771424

add a comment |

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)

  })

})

asked Nov 21 '18 at 15:28

Daniel Turcich

3771424

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 Turcich

3771424

asked Nov 21 '18 at 15:28

Daniel Turcich

3771424

asked Nov 21 '18 at 15:28

Daniel Turcich

3771424

asked Nov 21 '18 at 15:28

Daniel Turcich

3771424

asked Nov 21 '18 at 15:28

Daniel Turcich

3771424

add a comment |

1 Answer
1

active

oldest

votes

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 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');
});

Post as a guest

Name

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

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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 Turcich

3771424

add a comment |

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 Turcich

3771424

add a comment |

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 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 Turcich

3771424

answered Nov 21 '18 at 19:50

Daniel Turcich

3771424

answered Nov 21 '18 at 19:50

Daniel Turcich

3771424

answered Nov 21 '18 at 19:50

Daniel Turcich

3771424

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');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu