使用 Typescript 在 VueJS2 项目中使用 Jest 进行测试

Question

我设置了一个 VueJS 2 项目，并尝试在其中设置 TypeScript。我正在努力设置我的笑话测试。

我的 ts 组件：

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

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

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

服务/构建工作正常。但我的规格文件（虚拟的，一个 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();
    })

})

它总是抛出

测试套件无法运行 Jest 遇到意外标记 这通常意味着您正在尝试导入 Jest 无法解析的文件，例如，它不是纯 JavaScript。

我的 jest.config.js 文件

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)"
    ]

}

知道如何设置笑话吗？

Answer 1

我像这样使用 jest/vue/ts，希望它有帮助；）

笑话配置.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'],
}

简单组件的测试示例：

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('')
    })
  })
})

浅安装文件（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
  })
}