1 year ago

#290149

test-img

cefn

Impossible to test Vue components which have Typescript typings?

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

typescript

vue.js

jestjs

transpiler

vue-sfc

0 Answers

Your Answer

Accepted video resources