vue.js - Testa med Jest i ett VueJS2-projekt med Typescript

Jag har ett VueJS 2-projekt upplagt och jag försöker sätta upp TypeScript i det. Jag har svårt att sätta upp mina jest-tester.

Min ts-komponent:

<template>
    <div>some template<div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
    
});
</script>

Det fungerar bra för att serve/build. Men min spec-fil (en dummy, en component.spec.ts):

import { shallowMount} from '@vue/test-utils';
//@ts-ignore
import Form from "@/MyComponent";

describe("Solicitacao Form component", () => {

    let wrapper: any;
  
    beforeEach(() => {
        wrapper = shallowMount(Form, {
        });
    })
    test('Component created', () => {
        expect(wrapper).toBeDefined();
    })

})

Det kastar alltid

Testsatsen kunde inte köras. Jest stötte på ett oväntat tecken. Detta betyder vanligtvis att du försöker importera en fil som Jest inte kan tolka, t.ex. det är inte vanlig JavaScript.

Min jest.config.js-fil

module.exports = {
    preset: "@vue/cli-plugin-unit-jest/presets/typescript-and-babel",
    //testEnvironment: 'node',
    setupFiles: ["<rootDir>/tests/unit/index.js"],
    moduleFileExtensions: ["js", "ts", "vue", "json"],
    transform: {
        ".*\\.(vue)$": "vue-jest",
        "^.+\\.ts?$": "ts-jest",
        "^.+\\.js$": "babel-jest"
    },
    moduleNameMapper: {
        "^@/(.*)$": "<rootDir>/src/$1"
    },
    testMatch: [
        "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)"
    ]

}

Någon idé om hur man ställer in jest?

Svar #1

Jag använder jest/vue/ts så här, jag hoppas att det kommer att vara till hjälp ;)

jest.config.js

module.exports = {
  verbose: true,
  preset: '@vue/cli-plugin-unit-jest',
  collectCoverage: true,
  collectCoverageFrom: [
    'src/**/*.{ts,js,vue}'
  ],
  coveragePathIgnorePatterns: [
    '!src/main.ts',
    '!src/router.ts',
    '!src/plugins/*',
    '!src/types/*',
    '!src/model/*',
    '!*.d.ts',
  ],
  coverageReporters: ['html', 'text', 'lcov'],
  rootDir: '../..',
  moduleFileExtensions: ['js', 'json', 'ts', 'vue'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '^.+\\.vue$': 'vue-jest',
    '^.+\\.tsx?$': 'ts-jest'
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  setupFilesAfterEnv: ['./tests/unit/tools'],
}

testexempel på enkel komponent :

import { shallowMount } from '..';
import Maintenance from '@/components/Maintenance.vue';

describe('Maintenance.vue', () => {
  describe('getPositionStyle', () => {
    it('should be empty', () => {
      const componant = shallowMount(Maintenance).vm
      expect(componant.getPositionStyle()).toEqual('')
    })
  })
})

shallowMount-fil (index.ts)

import { shallowMount as shallowMountTestUtil, createLocalVue, ThisTypedShallowMountOptions } from '@vue/test-utils';
import { setupI18n } from './stub-i18n';
import { VueConstructor } from 'vue/types/umd';
import Vue from 'vue';

const localVue = createLocalVue();
const i18n = setupI18n(localVue);

export function shallowMount(component: VueConstructor, options: ThisTypedShallowMountOptions<Vue> = {}, mocks?: any, customLocalVue?: typeof Vue) {
  return shallowMountTestUtil(component, {
    localVue: (customLocalVue || localVue),
    i18n,
    ...options,
    mocks
  })
}

Relaterade artiklar