How to parse external template

[ai410320]

I got a problem to use Jest to test a vue file with external template. Looks like Jest didn't recognize the "@" as the setting I've add the moduleNameMapper in jest.config.js it works in the testing file (xxx.spec.js) (cause it can locate the vue file) , but didn't work in vue file (cause it can't locate the html file)

Please help me to point out the wrong place I've made , I'll be appreciated.

Here's the error messages :

PS C:\Users\H038\Desktop\newmodel\newFront\athenaPC_dev> npm run test:unit

> [email protected] test:unit C:\Users\H038\Desktop\newmodel\newFront\athenaPC_dev
> vue-cli-service test:unit

 FAIL  tests/unit/example.spec.js
  ● Test suite failed to run

    ENOENT: no such file or directory, open 'C:\Users\H038\Desktop\newmodel\newFront\athenaPC_dev\src\js\static\js\test\test.html'

      at Object.module.exports [as process] (node_modules/vue-jest/lib/process.js:63:35)
      at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:453:35)
      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:523:40)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)

Test Suites: 1 failed, 1 total
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test:unit: `vue-cli-service test:unit`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] test:unit script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Here's my file structure

src
 |__ js
 |       |__ test.vue
 |
static
 |__ js
         |__ test
                 |__ test.html

Here's my jest.config.js settings : <rootDir> is at C:\Users\H038\Desktop\newmodel\newFront\athenaPC_dev

module.exports = {
  preset: '@vue/cli-plugin-unit-jest/presets/no-babel',
  "moduleNameMapper": {
    "^@/(.*)$": "<rootDir>/src/$1",
  },
  "moduleFileExtensions": [
    "js",
    "jsx",
    "json",
    "vue",
    "ts",
    "tsx",
    "node",
  ],
}

Here's my testing vue file with external template (path of vue file is at //src/js/test.vue ) :

<template src="@/../static/js/test/test.html"></template>

<script>
export default {
  name: "test",

  data() {
    return {
      greeting: "Vue and TDD"
    }
  }
}
</script>

Here's my testing file (xxx.spec.js)

import { shallowMount } from '@vue/test-utils'
import Test from '@/js/test.vue'

describe('test.vue', () => {
  it('renders props.msg when passed', () => {
    const wrapper = shallowMount(Test)
    expect(wrapper.html().includes("Vue and TDD")).toBe(true)
  })
})

The content of HTML file is like (path of HTML is at //static/js/test/test.html ) :

<div>
    {{ greeting }}
</div>

[lmiller1990]

Can you please post a repository with that minimal structure? I am sorry but I can't afford to spend time reproducing your issue. If you can give me a clone-able repository I can take a look.

I am also not sure we can handle @ in <template src>. I have not seen this before.

[ai410320]

Hi @lmiller1990 , thanks for your attention! I've minimize my problem into a small repository that you could clone. I was wondering if Jest project could handle @ in <template src> It works fine in webpack framework. That's the private method defined in our project , and still don't know how to use Jest or other framework to unit-testing our project.

Here's the link https://github.com/ai410320/vue_test_practice

The test file is \test\unit\child.spec.js

[jolting]

Does vue-loader support that?

That seems strange to want to do that. Vue templates don't have a file format on their own. It looks like you're trying to import an HTML file, but templates aren't really HTML.

My opinion is allowing vue templates to exist outside of the component would run into similar problems that <script setup> had. I guess if vue-loader does it that jest-vue should do it.

[lmiller1990]

Looks like vue-loader does support this. I don't see why we can't support this. It's not super high on my priority list, but would be happy to have a PR implementing this.

[snake-py]

Is there any progress on this issue?

[lmiller1990]

There is no progress on this issue. If you'd like to try and implement this feature, happy to give you some pointers and point you in the right direction. I won't be able to work on in the foreseeable future, though, there are other higher priority issue that need attention.

[snake-py]

I found this lib https://www.npmjs.com/package/vue-template-loader-jest which works for me. But the author says that he has no time to support it.

Perhaps we could partly ship some of his code into the feature. But honestly, Vue is turning away from the class-based-components and wants to embrace single files more heavily. So I think this development would only be there to support legacy projects. If you know what I mean.

[lmiller1990]

Sure, we could adapt some code from that here. If you want to give a it a try and make a PR, happy to take a look.