1

Typescript enables Vue Single File Components (SFCs) to have a well-defined interface, such as knowing what prop names and types are allowed. Exciting!

However, you might want to test a component, and that's where the framework seems to have trouble. You have to import your typed Vue component from the .vue file into a Typescript file in order to test it.

Is there any mechanism that can be integrated into jest as a preset, or a loader or similar to facilitate imports from .vue files in test.ts files.

You can roll your own tooling to maintain redundant .d.ts files alongside the .vue source. An example is using the vue-tsc tool and a dedicated tsconfig.test.json to (re)create .d.ts files before every test run (linked below by Jeff Bowman). However, this is incredibly slow to re-build each time even in a small codebase. Also there is no obvious mechanism for this to be part of a jest pipeline (e.g. that could respect changes to edited source files as part of jest --watch within a modern TDD workflow)

By contrast for pure typescript, a preset like ts-jest provides integrated tooling for libraries AND tests to be written in typescript. No standalone build step is needed, no extra non-source files are strewn around the source tree, and changes to source files are immediately reflected within a jest --watch process.

Is there a jest-oriented toolchain that would permit a .vue file to be imported as a typed component into a Jest test written in typescript?

Take this example (jest) test.

// 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();
})

Ideally this jest .test.ts file should be able to import a .vue SFC and benefit from the typings of the component declared in it.

A fallback approach would be any tooling integrated with jest which ensures that types are maintained when running e.g. jest --watch

cefn
  • 2,895
  • 19
  • 28
  • Does this answer your question? [Generate d.ts file for Vue components written in Typescript](https://stackoverflow.com/questions/57998121/generate-d-ts-file-for-vue-components-written-in-typescript) – Jeff Bowman Mar 14 '22 at 18:46
  • Thanks for the link, Jeff. It's not the question I was asking, but the linked answer which uses vue-tsc does indeed eliminate the compiler error within the test suite! However it also generates .d.ts files throughout the source tree, including for .ts files and test.ts files and has no mechanism to avoid this for any files referenced by the .vue source. Also this build step would have to be managed by inventing our own tooling I imagine, by contrast with e.g. the ts-jest preset, which doesn't fill the filesystem with unnecessary files, and which is invoked as part of the jest pipeline. – cefn Mar 14 '22 at 19:41
  • I have clarified the question, although I can fall back on the explicit build step you described if there isn't any integrated tooling. I have it running locally as a manual build and just need to make it more approachable for devs TDDing on the codebase (hence preferred as a jest integration). – cefn Mar 14 '22 at 19:51
  • Thanks for elaborating. I do think there's a good question here about how automated the solution can be, but it is helpful to focus the question by saying what known options there are (SO questions or otherwise) and why they're insufficient. – Jeff Bowman Mar 14 '22 at 20:14
  • I know this isn't answering your question as you're specifically asking about jest, but I've been really happy using `vitest` with a TypeScript vue project. All of the typings and so forth "just work" with a really clean integration and great performance, and the testing interfaces are familiar. Other than compatibility with other parts of your workflow, I'm not sure what advantages jest maintains for a vue project. If nothing else, you may look at its implementation to see how it manages to make the typescript integration so clean. – Myk Willis Mar 15 '22 at 00:49
  • It's a useful insight. Thanks, Myk. I will experiment with vitest as well. I was looking at it in theory yesterday but you have prompted me to go further. I am porting a load of tests from Jest and Javascript to Typescript as part of a Vue2+Js to Vue3+Ts migration. I think Pnpm recursive run will enable me to abstract testing in the workflow even if different modules in my repo have different testing frameworks – cefn Mar 15 '22 at 09:11

0 Answers0