无法测试具有 Typescript 类型的 Vue 组件？

Question

Typescript 使 Vue 单文件组件 (SFC) 能够拥有定义良好的接口，例如知道允许哪些 prop 名称和类型。 令人兴奋！

但是，您可能想测试组件，这就是框架似乎有问题的地方。您必须将类型化的 Vue 组件从 .vue 文件导入到 Typescript 文件中才能对其进行测试。

是否有任何机制可以作为预设集成到 jest 中，或者加载器或类似的机制，以方便从 test.ts 文件中的 .vue 文件导入。

您可以推出自己的工具来维护冗余的 .d.ts 文件以及 .vue 源。一个示例是使用 vue-tsc 工具和专用 tsconfig.test.json 在每次测试运行之前（重新）创建 .d.ts 文件（Jeff Bowman 在下面链接）。然而，即使在小型代码库中，每次重新构建的速度也非常慢。此外，没有明显的机制让它成为笑话管道的一部分（例如，可以尊重对编辑源文件的更改作为现代 TDD 工作流程中笑话 --watch 的一部分）

相比之下，对于纯打字稿，像 这样的预设ts-jest 为用打字稿编写的库和测试提供集成工具。不需要独立的构建步骤，源树周围不会散布额外的非源文件，并且对源文件的更改会立即反映在 jest --watch 进程中。

是否有一个面向笑话的工具链允许将 .vue 文件作为类型化组件导入到用打字稿编写的 Jest 测试中？

以这个例子（开玩笑）测试为例。

// MyComponent.test.ts
import { mount } from '@vue/test-utils';
import MyComponent from './MyComponent.vue';

test("MyComponent click behaviour", () => {
      const wrapper = mount(MyComponent, {
        propsData: {
          message: 'Here is something to show to the user.',
        },
      });
      const label = wrapper.find('[class="my-component"]');
      await label.trigger('click');
      expect(wrapper.element).toMatchSnapshot();
})

理想情况下，这个 jest .test.ts 文件应该能够导入 .vue SFC 并从其中声明的组件的类型中受益。

后备方法是与 jest 集成的任何工具，确保在运行时维护类型，例如 jest --watch