credred/karma-vite

A karma plugin. Transform es module by using vite.

karma-vite's Issues

"Failed to load url" log output

When I try to use this plugin, I get slightly concerning "failed to load url" messages in the log output. They don't seem to affect the running of the tests, but I'd like to make them go away.

For example, I tried running the react example from this repo:

tom in ~/tools/karma-vite-react-example λ pnpm run test       

> @ test /home/tom/tools/karma-vite-react-example
> karma start

WebSocket server error: Port is already in use
19 10 2023 01:21:37.129:WARN [karma]: No captured browser, open http://localhost:9877/test/
19 10 2023 01:21:37.138:INFO [karma-server]: Karma v6.4.2 server started at http://localhost:9877/test/
19 10 2023 01:21:37.138:INFO [launcher]: Launching browsers ChromeHeadless with concurrency unlimited
19 10 2023 01:21:37.140:INFO [launcher]: Starting browser ChromeHeadless
19 10 2023 01:21:37.460:INFO [Chrome Headless 101.0.4950.0 (Linux x86_64)]: Connected on socket wI7gV6e9X34_FdDxAAAB with id 34240864
Failed to load url /test/base/node_modules/.pnpm/[email protected]/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?4d3d165a31f4a0cfbea94aa42ec76e0330a3121f (resolved id: /test/base/node_modules/.pnpm/[email protected]/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?4d3d165a31f4a0cfbea94aa42ec76e0330a3121f). Does the file exist?
Failed to load url /test/base/node_modules/.pnpm/[email protected][email protected]/node_modules/karma-jasmine/lib/boot.js?760d54bbca4f739f1f8b252c1636d76201cc4e88 (resolved id: /test/base/node_modules/.pnpm/[email protected][email protected]/node_modules/karma-jasmine/lib/boot.js?760d54bbca4f739f1f8b252c1636d76201cc4e88). Does the file exist?
Failed to load url /test/base/node_modules/.pnpm/[email protected][email protected]/node_modules/karma-jasmine/lib/adapter.js?db55991565c0f0381ab0fb3c340df5194b4bef99 (resolved id: /test/base/node_modules/.pnpm/[email protected][email protected]/node_modules/karma-jasmine/lib/adapter.js?db55991565c0f0381ab0fb3c340df5194b4bef99). Does the file exist?
Failed to load url /test/base/test/button.spec.tsx?03e521cbeac3f1a61985d33904014ea7655cff37 (resolved id: /test/base/test/button.spec.tsx?03e521cbeac3f1a61985d33904014ea7655cff37). Does the file exist?

  button test
    ✓ button width
    ✓ button click event

Chrome Headless 101.0.4950.0 (Linux x86_64): Executed 2 of 2 SUCCESS (0.023 secs / 0.018 secs)
TOTAL: 2 SUCCESS

I realize Karma is deprecated, but it still has 2.5M weekly downloads on NPM and is a bit difficult to find an alternative for, so it would be nice to figure this out.

Bare Modules Not Being Transformed

I'm not sure if I'm missing something obvious here but I'm migrating a legacy project over to ESM and will eventually be aiming for Typescript.

I'm still using Javascript though and the project builds and runs OK with vite. However using this plugin with Karma the bare module imports for items in node_modules are left intact and aren't transformed.

I've looked at the source and can't see any obvious reason. Logging shows the vite plugin is running.

Should this work? how can I debug this?

Line numbers are incorrect in reported stack trace

If you take the react example in this repo and change line 18 from

    expect(rect.width).toBe(200);

to

    expect(rect.width).toBe(100);

then the test fails as it should but the error reported is

1) button width
     button test
     Expected 200 to be 100.
    at <Jasmine>
    at UserContext.<anonymous> (test/button.spec.tsx:23:24)
    at <Jasmine>

which says line 23. This is the line number from http://localhost:9876/test/base/test/button.spec.tsx, which should be translated back using the source map

better stacktraces

hey :)

would it be possible to improve the stack traces?

right now it is hard to find out which files are involved in an error:

    at renderWithHooks (http://localhost:9876/node_modules/.vite/deps/chunk-Q2K3H3PB.js?v=7bef19f7:11191:26)
    at mountIndeterminateComponent (http://localhost:9876/node_modules/.vite/deps/chunk-Q2K3H3PB.js?v=7bef19f7:13353:21)
    at beginWork (http://localhost:9876/node_modules/.vite/deps/chunk-Q2K3H3PB.js?v=7bef19f7:14161:22)
    at HTMLUnknownElement.callCallback2 (http://localhost:9876/node_modules/.vite/deps/chunk-Q2K3H3PB.js?v=7bef19f7:3795:22)
    at Object.invokeGuardedCallbackDev (http://localhost:9876/node_modules/.vite/deps/chunk-Q2K3H3PB.js?v=7bef19f7:3820:24)
    at invokeGuardedCallback (http://localhost:9876/node_modules/.vite/deps/chunk-Q2K3H3PB.js?v=7bef19f7:3854:39)
     ReferenceError: global is not defined
 at resetIntersectionMocking (http://localhost:9876/node_modules/.vite/deps/react-intersection-observer_test-utils.js?v=7bef19f7:75:7)
    at UserContext.<anonymous> (http://localhost:9876/node_modules/.vite/deps/react-intersection-observer_test-utils.js?v=7bef19f7:27:9)
    at <Jasmine>

How to mock a module ?

Hi :)

Thank you for this awesome library.

Please tell me how to mock a module.

For example, karma-typescript-mock can mock a module.

Vite's CommonJS API is deprecated

When running karma with VITE_CJS_TRACE=true :

Trace: The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
    at warnCjsUsage (/home/nicojs/github/stryker-js/e2e/node_modules/vite/index.cjs:33:3)
    at Object.<anonymous> (/home/nicojs/github/stryker-js/e2e/node_modules/vite/index.cjs:3:1)
    at Module._compile (node:internal/modules/cjs/loader:1358:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Module._load (node:internal/modules/cjs/loader:1024:12)
    at Module.require (node:internal/modules/cjs/loader:1233:19)
    at require (node:internal/modules/helpers:179:18)
    at Object.<anonymous> (/home/nicojs/github/stryker-js/e2e/node_modules/karma-vite/dist/index.js:26:14)
    at Module._compile (node:internal/modules/cjs/loader:1358:14)

See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated

Support for vite@4

The peer dependencies show only major versions of vite 2 and 3 being supported, but 4.0.4 is currently out. Can 4 be supported as well?

exclude file from files regex

the exclude file from karma doesnt seam to work i think
could you verify this? its unclear how i can exluder files from beeing picked up.

other then that love your projectje +1

UnhandledRejection: Error: Cannot set headers after they are sent to the client

From time to time I get an error UnhandledRejection: Error: Cannot set headers after they are sent to the client.

ERROR [karma-server]: UnhandledRejection: Error: Cannot set headers after they are sent to the client
    at new NodeError (node:internal/errors:387:5)
    at ServerResponse.setHeader (node:_http_outgoing:603:11)
    at node_modules/karma-vite/dist/index.js:144:19

The best way to reproduce it is adding https://www.npmjs.com/package/karma-parallel - in that case it is happening for every test run for me.

Maybe a fix could be:

try {
  res.setHeader("Content-Type", "application/javascript");
} catch (e) {}

Vite compatibility with version 5

If you install karma-vite with version 5 it is throwing error that karma-vite is not compatible with it.

If you test the library with vite 5 (using --legacy-peer-deps), looks that everything is working fine. So i created a PR to add the compatibility: #9

Coverage is sawing that semicolon is not covered

Good afternoon,

I'm using react with karma and vite, while i'm running the coverage, it saws that some semicolon are not covered, usually in first imports.
image

I checked that we are using the right sourcemap and also set the sourcemap inside vite:

// karma.config

const path = require('path');

const istanbul = require('vite-plugin-istanbul');
const coverage = !!process.argv.find(arg => arg.includes('--coverage'));
const thresholds = {
  lines: 80,
  statements: 80,
  functions: 80,
  branches: 80
};

module.exports = function (config) {
  config.set({
    basePatch: path.resolve(''),
    frameworks: ['mocha', 'sinon-chai', 'vite'],
    files: [
      {
        pattern: 'src/**/*.spec.ts',
        type: 'module',
        watched: false,
        served: false
      },
      {
        pattern: 'src/**/*.test.ts',
        type: 'module',
        watched: false,
        served: false
      },
      {
        pattern: 'src/**/*.spec.tsx',
        type: 'module',
        watched: false,
        served: false
      },
      {
        pattern: 'src/**/*.test.tsx',
        type: 'module',
        watched: false,
        served: false
      },
      {
        pattern: 'src/*.test.tsx',
        type: 'module',
        watched: false,
        served: false
      },
      {
        pattern: 'src/config/*.json',
        watched: true,
        included: false,
        served: true
      },
      {
        pattern: 'public/**/*.json',
        watched: true,
        included: false,
        served: true
      }
    ],
    preprocessors: [
      {
        '**/*.ts': ['typescript', 'sourcemap'],
        '**/*.tsx': ['typescript', 'sourcemap']
      }
    ],
    reporters: coverage ? ['mocha', 'coverage-istanbul', 'progress', 'json-to-file', 'sonarqubeUnit', 'verbose'] : ['mocha', 'progress', 'json-to-file', 'verbose'],
    plugins: [
      'karma-vite',
      'karma-mocha',
      'karma-sinon-chai',
      'karma-typescript',
      'karma-chrome-launcher',
      'karma-mocha-reporter',
      'karma-coverage-istanbul-reporter',
      'karma-sonarqube-unit-reporter',
      'karma-verbose-reporter',
      'karma-sourcemap-writer',
      'karma-sourcemap-loader',
      'karma-json-to-file-reporter'
    ],
    sonarQubeUnitReporter: {
      sonarQubeVersion: 'LATEST',
      outputFile: 'test/test-reports/xunit/ut_report.xml',
      basePath: ['./'],
      filePattern: '*.test.tsx',
      useBrowserName: false,
      // testFilePattern and overrideTestDescription are REQUIRED to generate proper test paths in SonarQube
      testFilePattern: '*.test.tsx',
      overrideTestDescription: true
    },
    jsonToFileReporter: {
      outputPath: './spec/',
      fileName: 'spec.json',
      overwrite: true,
      filter: (obj) => obj.type === 'spec'
    },
    client: {
      args: config.spec ? ['--spec'] : [],
      mocha: {
        ui: 'bdd',
      }
    },
    port: 9876,
    colors: true,
    customLaunchers: {
      ChromeHeadlessNoSandbox: {
        base: 'ChromeHeadless',
        flags: ['--no-sandbox', '--disable-setuid-sandbox'],
      },
    },
    browsers: ['ChromeHeadlessNoSandbox'],
    autoWatch: false,
    singleRun: true,
    concurrency: Infinity,
    restartOnFileChange: false,
    coverageIstanbulReporter: {
      reports: ['html', 'text', 'lcov'],
      dir: 'test/test-reports/coverage',
      combineBrowserReports: true,
      thresholds: {
        global: {
          ...thresholds
        }
      },
      skipFilesWithNoCoverage: false,
    },
    vite: {
      config: {
        build: {
          target: 'es6',
          sourcemap: 'inline'
        },
        plugins: [
          istanbul({
            include: 'src/*',
            exclude: ['node_modules', 'test/'],
            extension: ['.js', '.ts', '.tsx'],
            requireEnv: true,
          })
        ]
      },
      coverage: {
        include: ['src/**/*.tsx'],
        exclude: ["src/routes.tsx", "**/*.spec.tsx", "**/*.test.tsx", "**/*.spec.ts", "**/*.test.ts", 'test/**.tsx', 'test/**.ts']
      }
    }
  });
};

In coverage html report i can see the following report
image

Do you have some suggestion to solve it?

Thanks in advance