typescript - Vue3 组件库 + Typescript + Rollup + Mocha - 带有 mount/shallowmount 的单元测试。有没有人做到过

Question

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

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

• Vue3
• 打字稿
• Rollup 作为捆绑器
• Mocha 作为测试框架

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

但最后我总是失败。要么是缺少 DOM，要么是编译错误。大多数时候是因为 Typescript 或无法在浏览器中使用的语句遇到问题。我将发布我的业力配置，但我认为我仍然走在正确的道路上，我的问题只是

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

业力.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
  });
};

标签： typescriptmocha.jskarma-runnervuejs3rollup