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

Posted 2023-02-22

【中文标题】使用 Typescript 在 VueJS2 项目中使用 Jest 进行测试

【英文标题】：Test with Jest in a VueJS2 project with Typescript

【发布时间】：2021-07-16 17:03:37

【问题描述】：

我设置了一个 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)"
    ]

知道如何设置笑话吗？

【参考方案1】：

我这样用jest/vue/ts，希望对你有帮助;)

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'],

简单组件测试示例：

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 文件 (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
  )