[英]TypeError: Unable to require `.d.ts` file
I have a problem when running the command vue-cli-service test:unit --no-cache
.运行命令vue-cli-service test:unit --no-cache
时遇到问题。
(link to CI https://github.com/baronkoko/vue-unit-tests-type-error/runs/3728921894?check_suite_focus=true ) (链接到 CI https://github.com/baronkoko/vue-unit-tests-type-error/runs/3728921894?check_suite_focus=true )
Occurs when used in the Vue component imported typescript file from the node modules in which in turn there is another typescript file import当在 Vue 组件中使用从节点模块导入的打字稿文件时发生,而节点模块又是另一个打字稿文件导入
example.spec.ts例子.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()}`
);
});
});
HelloWorld.vue 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>
fake-util.ts假util.ts
import { Helpers } from "./helpers";
export class FakeUtil {
getFullNameCapitalized(firstName: string, lastName: string): string {
return `${Helpers.capitalize(firstName)} ${Helpers.capitalize(lastName)}`;
}
}
helpers.ts helpers.ts
export class Helpers {
static capitalize(text: string): string {
return text.toUpperCase();
}
}
Full example https://github.com/baronkoko/vue-unit-tests-type-error完整示例https://github.com/baronkoko/vue-unit-tests-type-error
Possible solutions:可能的解决方案:
Add the extension to the imported file, but it will look like this将扩展名添加到导入的文件中,但它看起来像这样
// @ts-ignore // @ts-忽略
import { Helpers } from "./helpers.ts";从“./helpers.ts”导入{助手};
Enable isolatedModules to the jest.config.js ts-jest为 jest.config.js ts-jest 启用隔离模块
globals: { "ts-jest": { isolatedModules: true, }, },全局变量:{“ts-jest”:{isolatedModules:true,},},
But then we get a lot of SyntaxError, for example, if there is optional chaining SyntaxError但是后来我们得到了很多SyntaxError,比如如果有可选链SyntaxError
Can anyone help with this, please?任何人都可以帮忙吗?
通过以esm
格式使用 Rollup 构建所有外部模块并使用它们来解决此问题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.