Template markup must be wrapped in a <template> from jest with .JADE templates

Help Requests
1

Hello everyone,
I’m trying to migrate to jest as a test framework in my project, but what I’m getting from the components spec files is:

console.log
    Error: Template markup must be wrapped in a <template> element e.g. <template> <!-- markup here --> </template>
        at NodeJsDom.createTemplateFromMarkup (C:\..\node_modules\aurelia-pal-nodejs\dist\nodejs-dom.js:70:19)
        at TextTemplateLoader.<anonymous> (C:\..\node_modules\aurelia-loader-nodejs\dist\commonjs\aurelia-loader-nodejs.js:101:60)  
        at step (C:\..\node_modules\aurelia-loader-nodejs\dist\commonjs\aurelia-loader-nodejs.js:42:23)
        at Object.next (C:\..\node_modules\aurelia-loader-nodejs\dist\commonjs\aurelia-loader-nodejs.js:23:53)
        at fulfilled (C:\..n\node_modules\aurelia-loader-nodejs\dist\commonjs\aurelia-loader-nodejs.js:14:58)
        at processTicksAndRejections (node:internal/process/task_queues:96:5)

…where the project uses .jade templates.
In my package json I have:

....
 "jest": {
    "testMatch": [
      "<rootDir>/src/features/elements/buttons/base/base.spec.js"
    ],
    "moduleNameMapper": {
      "^aurelia-binding$": "<rootDir>/node_modules/aurelia-binding"
    },
    "modulePaths": [
      "<rootDir>/src",
      "<rootDir>/node_modules"
    ],
    "moduleFileExtensions": [
      "js",
      "json"
    ],
    "transform": {
      "^.+\\.(css|less|sass|scss|styl|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "jest-transform-stub",
      "^.+\\.js$": "babel-jest",
      "\\.(jade)$": "jest-transform-pug"
    },
    "setupFiles": [
      "<rootDir>/test/jest-pretest.js"
    ],
    "testEnvironment": "node",
    "collectCoverage": false,
    "collectCoverageFrom": [
      "src/**/*.js",
      "!**/*.spec.js",
      "!**/node_modules/**",
      "!**/test/**"
    ],
    "coverageDirectory": "<rootDir>/test/coverage-jest",
    "coverageReporters": [
      "json",
      "lcov",
      "text",
      "html"
    ]
  }
...

When I change in my module:

@useView(PLATFORM.moduleName('./base.jade'))
@customElement('base-button')
@inject(Element)

./base.jade to base.html - things are seem to work.
Does anyone hit his head with this problem before?
I’ll hight appreciate any help.

2

Is there any special code in the application dealing with .jade extension that isn’t replicated in the test app?

3

Hi @bigopon

only in the webpack configuration:

....
module: {
   rules: [
        { test: /\.jade$/i, loaders: ['html-loader', 'aurelia-webpack-plugin/html-requires-loader', 'pug-html-loader'] }
.....
]
}
........
new AureliaPlugin({
        viewsExtensions: ['.jade', '.html'],
        features: {
          ie: false,
          svg: false
        }
      }),

.....

Only these fragments are dealing with my jade templates.

4

While I have in my templates

@useView(PLATFORM.moduleName('./base.jade'))
@customElement('base-button')
@inject(Element)
export class BaseButton {
.....
}
I have this error, which comes from the Aurelia Pal Node JS. This is because the view passed to that loader is not HTML, but jade. When I change the row to 
`@useView(PLATFORM.moduleName('./base.html'))` - things seems to work. 
I need a way (somehow) to compile the jade template before running the test and pass to useView decorator compiled version. Is this possible in Aurelia?
5

Really random guess: you can inject aurelia loader node js and register a handler for .jade extension, so it’ll be retrieving the html instead, but since you are using the webpack plugin, it shouldn’t be necessary.

Is there any error? can you paste the error message here?

1 Like
6

Hi @bigopon ,
I want toi thank you for helping me with this first.
When I have @useView('./base.jade')
I’ve got an error from the aurelia pal nodejs, line 70 or something saying:

console.log
    Error: Template markup must be wrapped in a <template> element e.g. <template> <!-- markup here --> </template>
        at NodeJsDom.createTemplateFromMarkup (C:\..\node_modules\aurelia-pal-nodejs\dist\nodejs-dom.js:70:19)
        at TextTemplateLoader.<anonymous> (C:\..\node_modules\aurelia-loader-nodejs\dist\commonjs\aurelia-loader-nodejs.js:101:60)  
        at step (C:\..\node_modules\aurelia-loader-nodejs\dist\commonjs\aurelia-loader-nodejs.js:42:23)
        at Object.next (C:\..\node_modules\aurelia-loader-nodejs\dist\commonjs\aurelia-loader-nodejs.js:23:53)
        at fulfilled (C:\..n\node_modules\aurelia-loader-nodejs\dist\commonjs\aurelia-loader-nodejs.js:14:58)
        at processTicksAndRejections (node:internal/process/task_queues:96:5)

when I change it to .HTML @useView(PLATFORM.moduleName('./base.html')) - it works.
All I need is a way to tell the test runner to process the jade templates before load the component.
In my jest config I have:

"transform": {
     "^.+\\.(css|less|sass|scss|styl|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "jest-transform-stub",
     "^.+\\.js$": "babel-jest",
     "^.+\\.(jade)$": "jest-transform-pug"
   }
 }

but this makes no difference.