Software Stack
- Vue version 3.2.19
- @vue/test-utils version 2.0.0-rc.15
- Typescript version 4.1.6
Issue Description
Encountering an error when running the command
vue-cli-service test:unit --no-cachePlease refer to the TypeError screenshot
(link to Continuous Integration details https://github.com/baronkoko/vue-unit-tests-type-error/runs/3728921894?check_suite_focus=true)
The issue occurs when a Vue component, which is importing a TypeScript file from node modules, has another TypeScript file import.
Sample code from example.spec.ts:
import { shallowMount } from "@vue/test-utils";
import HelloWorld from "@/components/HelloWorld.vue";
describe("HelloWorld.vue", () => {
it("should render full name", () => {
const firstName = "Tailor";
const lastName = "Cox";
const wrapper = shallowMount(HelloWorld, {
props: { firstName, lastName },
});
expect(wrapper.text()).toMatch(
`${firstName.toUpperCase()} ${lastName.toUpperCase()}`
);
});
});
Code snippet from HelloWorld.vue:
<template>
<div class="hello">
<h1>{{ fullName }}</h1>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { FakeUtil } from "fake-utils-lib/src/fake-util";
export default defineComponent({
name: "HelloWorld",
props: {
firstName: {
type: String,
default: "",
},
lastName: {
type: String,
default: "",
},
},
computed: {
fullName() {
const util = new FakeUtil();
return util.getFullNameCapitalized(this.firstName, this.lastName);
},
},
});
</script>
Content of fake-util.ts:
import { Helpers } from "./helpers";
export class FakeUtil {
getFullNameCapitalized(firstName: string, lastName: string): string {
return `${Helpers.capitalize(firstName)} ${Helpers.capitalize(lastName)}`;
}
}
Code in helpers.ts:
export class Helpers {
static capitalize(text: string): string {
return text.toUpperCase();
}
}
You can find the complete example at this GitHub repository
Possible solutions for the issue include:
Add the extension to the imported file, for instance:
// @ts-ignore
import { Helpers } from "./helpers.ts";
Enable isolatedModules in ts-jest within jest.config.js
globals: { "ts-jest": { isolatedModules: true, }, },
However, enabling isolatedModules may cause SyntaxError issues, especially with optional chaining as shown here
If anyone can provide assistance with resolving this problem, it would be greatly appreciated.