Vue/Typescript 测试建议答案

【问题标题】：Vue/Typescript testing adviceVue/Typescript 测试建议
【发布时间】：2020-02-07 16:27:18
【问题描述】：

我需要一些关于从哪里开始的建议。我一直在玩 vue-jest、ts-jest、babel-jest 和 vue-test-utils（atm 都安装了）。

我的 jest.config.js 文件：

const { defaults: tsjPreset } = require('ts-jest/presets');
const { pathsToModuleNameMapper } = require('ts-jest/utils');
const { compilerOptions } = require('./tsconfig.json');
const path = require('path')

module.exports = {
  preset: 'ts-jest/presets/js-with-ts',
  testEnvironment: 'node',
  modulePaths: ['<rootDir>/src', '<rootDir>/node_modules'],
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths),
  moduleNameMapper: {
      '~(.*)$': '<rootDir>/src/$1',
      'components(.*)$': '<rootDir>/src/$1',
      '^vue$': 'vue/dist/vue.common.js'
    },
  transform: {
    ...tsjPreset.transform,
    '^.+\\.(js|jsx)?$': '<rootDir>/node_modules/babel-jest',
    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
    '.*\\.(vue|ts|tsx)$': '<rootDir>/node_modules/ts-jest',
  },
  transformIgnorePatterns: ['/src/plugins/*', '/node_modules'],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'vue', 'pug'],
  globals: {
    'ts-jest': {
      compiler: 'typescript'
    },
    'vue-jest': {
      pug: {
        'filename': 'pug',
        'doctype': 'html',
        'basedir': './'
      }
    }
  }
};

组件设置看起来像这个例子 - 类别.Vue：

<template src='./category.pug'         />
<script   src='./category.ts'          />
<style    src='./category.styl' scoped />

将上述文件放在同一个文件夹中。

当我导入 .vue 文件进行测试时，我收到一个 pug 错误，模板无法编译。即使将其更改为普通 html，我也会在 vue 文件中的“导入”行中出现错误。

直接导入ts文件时，显然没有包含模板，这也是个问题。

那么我需要我拥有的所有包裹还是我走错了路？我在让这些东西正常工作时遇到了问题，我不确定我是否应该从头开始。

【问题讨论】：

标签： typescript vue.js jestjs pug vue-test-utils

【解决方案1】：

如果有人仍然遇到问题，这是我用来让它工作的：

const { pathsToModuleNameMapper } = require('ts-jest/utils')
const { compilerOptions } = require('./tsconfig.json')

module.exports = {
  preset: '@vue/cli-plugin-unit-jest/presets/typescript', // <--- important
  modulePaths: ['<rootDir>/src', '<rootDir>/node_modules'], // <--- important
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths), // <--- important
  testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],

  transform: {
    '^.+\\.vue$': 'vue-jest'
  },
  transformIgnorePatterns: ['/src/plugins/*', '/node_modules'],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'vue', 'pug'],
  globals: {
    'ts-jest': {
      compiler: 'typescript'
    },
    'vue-jest': {
      pug: {
        filename: 'pug',
        doctype: 'html',
        basedir: './'
      }
    }
  }
}

【讨论】：