Testing components in AU1

Help Requests
1

Hello guys,
I’m Having trouble running my tests (apparently, they have not been maintained for a long time).
What I’m getting is:

....
i ｢wdm｣: Compiled successfully.
23 02 2024 15:04:37.345:INFO [karma-server]: Karma v6.4.2 server started at http://localhost:9876/
23 02 2024 15:04:37.346:INFO [launcher]: Launching browsers ChromeHeadless with concurrency unlimited
23 02 2024 15:04:37.375:INFO [launcher]: Starting browser Chrome
23 02 2024 15:04:49.013:INFO [Chrome Headless 122.0.6261.57 (Windows 10)]: Connected on socket qAzxsWGUd23uBRvfAAAB with id 26550575
23 02 2024 15:05:19.029:WARN [Chrome Headless 122.0.6261.57 (Windows 10)]: Disconnected (0 times) , because no message in 30000 ms.
Chrome Headless 122.0.6261.57 (Windows 10) ERROR
  Disconnected , because no message in 30000 ms.
Chrome Headless 122.0.6261.57 (Windows 10) ERROR
  Disconnected , because no message in 30000 ms.

constantly in my two projects.
I’m using Aurelia CLI 3.01 and aurelia-framework 1.4.1
The npm script is “npm start – test.karma”
and the the karma config is attached:

// Karma bundle
import 'aurelia-polyfills';
import 'aurelia-loader-webpack';
import { install as installJasmineAsync } from 'jest-jasmine2/jasmine-async';

// enable running Promise-returning tests:
installJasmineAsync(global);

// disable stacktrace limit so we do not loose any error information
Error.stackTraceLimit = Infinity;

// load and run tests:
const testModuleContexts = loadTestModules();
runTests(testModuleContexts);

function loadTestModules() {
  const srcContext = require.context(
    // directory:
    '../src',
    // recursive:
    true,
    // tests in /src folder regex:
    /\.spec\.[tj]s$/im
  );

  return [srcContext];
}

function runTests(contexts) {
  contexts.forEach(requireAllInContext);
}

function requireAllInContext(requireContext) {
  return requireContext.keys().map(requireContext);
}


// Karma config


const path = require('path');

module.exports = (config) => {
  config.set({
    basePath: path.dirname(__dirname),
    frameworks: ['jasmine', 'requirejs'],
    files: [{ pattern: 'test/karma-bundle.js', watched: false }],
    preprocessors: {
      '**/*.jade': ['pug'],
      'test/karma-bundle.js': ['webpack', 'coverage']
    },

    webpack: require('../webpack.config')({ tests: true }),
    reporters: ['mocha', 'progress', 'coverage'],

    coverageReporter: {
      reporters: [{ type: 'html' }, { type: 'lcovonly' }, { type: 'text-summary' }],
      dir: path.resolve(__dirname, 'coverage-karma'),
      subdir: '.'
    },
    webpackServer: { noInfo: true },

    // web server port
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: false,
    browsers: ['ChromeHeadless'],

    customLaunchers: {
      ChromeHeadless: {
        base: 'Chrome',
        flags: ['--no-sandbox', '--headless', '--disable-gpu', '--remote-debugging-port=9222']
      }
    },

    client: {
      jasmine: {
        random: false
      }
    },
    singleRun: true
  });
};

The Aurelia project is missing ./aurelia-project folder with tasks and so on. Instead, it uses NPS and NPS-UTILS and the following are the nps scripts:

// package-scripts

module.exports = {
  scripts: {
    default: 'nps webpack',
    test: {
      default: 'nps test.jest',
      jest: {
        default: series(
          rimraf('test/coverage-jest'),
          crossEnv('BABEL_TARGET=node jest')
        ),
        accept: crossEnv('BABEL_TARGET=node jest -u'),
        watch: crossEnv('BABEL_TARGET=node jest --watch')
      },
      karma: {
        default: series(
          rimraf('test/coverage-karma'),
          'karma start test/karma.conf.js'
        ),
        watch: 'karma start test/karma.conf.js --auto-watch --no-single-run',
        debug: 'karma start test/karma.conf.js --auto-watch --no-single-run --debug'
      },
      lint: {
        default: 'eslint src',
        fix: 'eslint --fix'
      },
      all: concurrent({
        browser: series.nps('test.karma', 'e2e'),
        jest: 'nps test.jest',
        lint: 'nps test.lint'
      })
    },
    build: 'nps webpack.build',
    webpack: {
      default: 'nps webpack.server',
      build: {
        before: rimraf('dist'),
        default: 'nps webpack.build.production',
        development: {
          default: series(
            'nps webpack.build.before',
            'webpack --progress -d'
          ),
          extractCss: series(
            'nps webpack.build.before',
            'webpack --progress -d --env.extractCss'
          ),
          serve: series.nps(
            'webpack.build.development',
            'serve'
          )
        },
        production: {
          inlineCss: series(
            'nps webpack.build.before',
            crossEnv('NODE_ENV=production webpack --progress -p --env.production')
          ),
          default: series(
            'nps webpack.build.before',
            crossEnv('NODE_ENV=production webpack --progress -p --env.production --env.extractCss')
          ),
          serve: series.nps(
            'webpack.build.production',
            'serve'
          )
        }
      },
      server: {
        default: 'webpack-dev-server -d --inline --env.server --port 9000 --compress --env.NODE_ENV=developing',
        extractCss: 'webpack-dev-server -d --inline --env.server --env.extractCss',
        hmr: 'webpack-dev-server -d --inline --hot --env.server'
      }
    },
    serve: 'http-server dist --cors'
  }
};

any help will be highly appreciated!

2

And maybe I should add my Webpack configuration?
Each time I get this timeout:

image
image1110×334 29.3 KB

3

Pasting the link to the corresponding discussion on Discord here so we don’t get confused later https://discord.com/channels/448698263508615178/1210588878491353109

1 Like