Vue3 组件库 + Typescript + Rollup + Mocha - 使用 mount/shallowmount 进行单元测试有没有人让它发生

如何解决Vue3 组件库 + Typescript + Rollup + Mocha - 使用 mount/shallowmount 进行单元测试有没有人让它发生

我目前正在为 vue3 开发一个组件库。一切正常，但来自后端，如果没有适当的单元测试，我就不能离开它。我在 GitHub 上发现了一些使用相同设置的框架，但不幸的是，它们都完全缺少测试。 不幸的是，我发现此设置的一些样板项目没有测试支持

然而，经过多天、无休止的谷歌搜索尝试等，我在这一点上非常沮丧。我的设置是

• Vue3
• 打字稿
• 作为打包器汇总
• Mocha 作为测试框架

我尝试过只使用 mocha（可能因为缺少对 DOM 的访问而失败）。我尝试了不同的打包器，比如 webpack（即使它有效，我也不希望将我的高效应用程序与我的测试不同的东西捆绑在一起）

但最终我总是失败。要么是缺少 DOM 的问题，要么是未来的编译错误。大多数时候是因为某些东西在使用 Typescript 或无法在浏览器中使用的语句。我会发布我的 karma 配置，但我认为我离正确的道路还很远，我的问题只是

有没有人做过这个工作？如果有人拥有，如果他/她能与我分享她不可思议的智慧，那就太好了。

karma.conf.js

process.env.CHROME_BIN = require('puppeteer').executablePath();
const tsconfig = require('./tsconfig.json');
const rollupConfig = require('./rollup.config');


module.exports = function (config) {
  config.set({
    browsers: ['ChromeHeadlessNoSandBox'],customLaunchers: {
      ChromeHeadlessNoSandBox: {
        base: 'ChromeHeadless',flags: ['--no-sandBox','--remote-debugging-port','9222']
      },},mime: {
      'text/x-typescript': ['ts','tsx']
    },frameworks: ['mocha'],files: [
      { pattern: 'tests/**/*.spec.ts',watched: false },{ pattern: 'src/*',watched: false }
    ],exclude: [
    ],preprocessors: {
      'src/*': ['rollupBuild'],'tests/**/*.ts': ['rollupTs'],// rollupPreprocessor: rollupConfig,customPreprocessors: {
      rollupBuild: {
        base: 'rollup',options: rollupConfig
      },rollupTs: {
        base: 'rollup',options: {
          // In this case,to use a different transpiler:
          plugins: [require('rollup-plugin-typescript2')()],output: {
            file: 'bundle.mjs',format: 'es',sourcemap: 'inline'
          }
        },karmaTypescriptConfig: {
      bundlerOptions: {
        // transforms: [require('karma-typescript-es6-transform')()]
      },tsconfig: './tsconfig.json'         
    },typescriptPreprocessor: {
      // options passed to the typescript compiler
      options: {
        sourceMap: false,// (optional) Generates corresponding .map file.
        target: 'ES3',// (optional) Specify ECMAScript target version: 'ES3' (default),or 'ES5'
        module: 'commonjs',// (optional) Specify module code generation: 'commonjs' or 'amd'
        noImplicitAny: true,// (optional) Warn on expressions and declarations with an implied 'any' type.
        noresolve: true,// (optional) Skip resolution and preprocessing.
        removeComments: true,// (optional) Do not emit comments to output.
        concatenateOutput: false,// (optional) Concatenate and emit output to single file. By default true if module option is omited,otherwise false.
        moduleResolution: 'classic'
      },// transforming the filenames
      transformPath: function(path) {
        return path.replace(/\.ts$/,'.js');
      }
    },reporters: ['mocha'],plugins: [
      'karma-typescript-preprocessor','karma-typescript','karma-mocha','karma-mocha-reporter','karma-chrome-launcher','karma-rollup-preprocessor'
    ],port: 9876,colors: true,logLevel: config.LOG_DEBUG,autoWatch: true,singleRun: false
  });
};