我将 Jest 与 Typescript 结合使用。我想创建一个单一存储库。我的文件夹结构是：
fe
|-app1
|--.jest.config.ts
|--tsconfig.json
|-shared
|--dummyData.ts
我想要一个单元测试来app1访问shared文件夹中的一些数据。
fe/app1/demo.spec.ts:
import { someData } from '@shared/dummyData' //<--HERE: the alias is works, but jest can not understand "export" keyword
descrube('demo' () => {
it('demo test', () => {
expect(someData).toBe('DUMMY'));
})
})
fe/shared/dummyData.ts:
export const someData = 'DUMMY';
问题是 jest 抛出错误：
Jest encountered an unexpected token
{"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export const someData = 'DUMMY';
^^^^^^
据我了解，它无法解析由 ts 和 babel 生成的 typescript 或 es6 模块。当文件夹位于 inside …
我正在尝试更新 Vue 3 的版本 ( 3.2.x-> 3.3.x)。
但由于某种原因，我在使用时出现错误withDefaults：
<script setup lang="ts">
interface Props {
readonly title: string;
}
// THIS WORKS
const props = defineProps<Props>();
// THIS DOESN'T WORK (guess because of withDefaults)
const props = withDefaults(defineProps<Props>(), { title: '' });
...
</script>
错误信息是：
参数类型
DefineProps<Props, BooleanKey<Props>>不可分配给参数类型DefineProps<Readonly<Props> & {}, keyof Readonly<Props> & {}>
我想我正在按照文档中的描述进行操作，这里有什么问题吗？
更新：看起来这个问题仅发生在非布尔字段：
// THIS WORKS
withDefaults(defineProps<{readonly foo: boolean}>(), { foo: true });
// THIS DOESN'T WORK
withDefaults(defineProps<{readonly foo: …我只是想知道我是否可以将下面的代码做得不那么难看。
在组件中，我有一个属性person。我想person在模板中使用对象的字段，而无需在每个字段前面加上person.something. 但我知道的唯一方法是在下面。
这是我有 atm：
（请把下面的代码当作一个例子，它不是真实的）
{
name: 'Demo',
props: {
person: {
type: Object,
default: {}
}
},
computed: {
firstName() {
return this.person.firstName
},
lastName() {
return this.person.lastName
},
age() {
return this.person.age
},
gender() {
return this.person.gender
}
}
}
这就是我想要的（有点）：
{
name: 'Demo',
props: {
person: {
type: Object,
default: {}
}
},
computed: {
...this.person // <-- something like this would be better if only it …useStore()您能解释一下在 vue 3 组件（composition-api）中使用函数的原因是什么吗？
我很困惑，因为商店的直接导入也有效，例如：
<script setup>
import { store } from '@/store';
const foo = computed(() => store.getters['foo']); // works!
</script>
但很多时候我看到人们正在使用useStore()：
<script setup>
import { useStore } from 'vuex';
const store = useStore();
const foo = computed(() => store.getters['foo']); // also works well
</script>
为什么？到目前为止感觉只是额外的一行代码。我想我错过了一些东西。
谢谢
重要更新：我了解到，useStore()如果您正在进行单元测试并想要模拟商店，则需要这样做。
如何从 vitest 的覆盖率报告中排除目录？
我正在寻找类似coveragePathIgnorePatterns选项的东西，因为它是开玩笑的：
coveragePathIgnorePatterns: [
'<rootDir>/src/foo.ts',
'<rootDir>/src/bar.ts',
....
],
我怎样才能做到这一点vitest.config.ts？
我想将我的Vue 2项目从 webpack 迁移到Vite。并且必须使用使用lit-element构建的第三方 Web 组件。
这些组件在运行时抛出错误（通过 vue）：
未知的自定义元素：< foo-component > - 您是否正确注册了该组件？对于递归组件，请确保提供“名称”选项。
还有（通过lit-element）
无法设置“ShadowRoot”上的“adoptedStyleSheets”属性：无法将值转换为“CSSStyleSheet”。
据我所知，那些第三方 Web 组件仅在其索引文件（内部node_modules）中执行此操作：
import FooComponent from './FooComponent';
customElements.define('foo-component', FooComponent);
所以之前（使用 webpack 设置）我只是导入它们并且一切都可以工作。嗯，实际上 webpacklit-scss-loader也用于这些组件。
我认为 Vite 可能需要一些额外的配置，或者这里可能需要类似于“webpack”加载器的东西，但不确定我必须移动哪个方向。
我做错了什么？
我想强制执行显式声明代码中所有函数和方法的返回类型。
所以我设定了'@typescript-eslint/explicit-function-return-type': 'error'。但它并不总是有效：
这没问题，eslint抛出错误：
const obj = {
fn() { // <---- no return type, so "Missing return type on function" error
return 2;
}
};
这是不行的，eslint这里没有问题：
const obj: Record<string, any> = { // <---- But if I declare a type of an object...
fn() { // <---- ...this is throws no error anymore!
return 2;
}
};
如何确保不存在没有显式返回类型定义的方法？