The execution of Jasmine implementation callbacks is not governed by karma

I'm currently facing an issue with running my Jasmine tests using Karma. Any help or suggestions would be greatly appreciated.

When I try to run the tests with Karma (using "karma start --singleRun=true"), the browser opens but nothing happens and eventually, Karma times out with the following error:

26 06 2019 14:40:24.431:INFO [karma]: Delaying execution, these browsers are not ready: Chrome 75.0.3770 (Windows 10.0.0)
26 06 2019 14:42:01.326:WARN [Chrome 75.0.3770 (Windows 10.0.0)]: Disconnected (0 times), because no message in 160000 ms.
26 06 2019 14:42:01.327:DEBUG [Chrome 75.0.3770 (Windows 10.0.0)]: CONFIGURING -> DISCONNECTED
Chrome 75.0.3770 (Windows 10.0.0) ERROR
  Disconnected, because no message in 160000 ms.
26 06 2019 14:42:01.330:DEBUG [launcher]: CAPTURED -> BEING_KILLED
26 06 2019 14:42:01.332:DEBUG [launcher]: BEING_KILLED -> BEING_FORCE_KILLED
26 06 2019 14:42:01.333:WARN [karma]: No captured browser, open http://localhost:9876/

Chrome 75.0.3770 (Windows 10.0.0): Executed 0 of 0 DISCONNECTED (2 mins 40.011 secs / 0 secs)

If I try running the tests with "--singleRun=false" and set breakpoints in my test code, then run "karma run karma.conf.js" from a new command prompt, I observed that breakpoints inside the implementation callbacks for my tests are never hit. Other breakpoints work fine.

For example, if I have the following test:


describe(">String Utils", function() {
    it("should be able to lower case a string",function() {
        expect(utils.toLowerCase).toBeDefined();
        expect(utils.toLowerCase("HELLO WORLD")).toEqual("hello world");
    });
});

A breakpoint on the "describe" or "it" functions gets hit, but the breakpoints on the "expect" statements do not get hit.

I've checked for errors while setting up the jasmine spec inside the "it" functions, but everything seems okay. However, Karma never calls the implementation callbacks and the browser remains idle continuously.

You can find my karma.conf.js, spec-bundle.js, and webpack configuration below.

For more details or if you'd like to see additional information, you can visit my GitHub repository: https://github.com/webgirlwonder/karma-jasmine-test

// Karma configuration
// Generated on Fri May 17 2019 10:37:04 GMT-0500 (Central Daylight Time)

var webpackConfig = require('./webpack.config.js');

module.exports = function(config) {
config.set({

    basePath: '',

    frameworks: ['jasmine','requirejs'],

    files: [
      'spec-bundle.js'
    ],

    exclude: [],

    preprocessors: {
      'spec-bundle.js': ['webpack' ]
    },

    webpack: webpackConfig,

    reporters: ['spec'],

    port: 9876,

    colors: true,

    logLevel: config.LOG_DEBUG,

    browsers: ['Chrome'],

    concurrency: Infinity,
    captureTimeout: 160000,
    browserNoActivityTimeout: 160000,
})
}

spec-bundle.js

/*
 * Create a context for all tests files below the src folder and all sub-folders.
 */
const context = require.context('./spec/', true, /\Spec\.js$/);

/*
 * For each file, call the context function that will require the file and load it up here.
 */
context.keys().forEach(context);

webpack

const config =  {
    "mode": "development",
    "entry": "./spec/MyJSUtilities.spec.js",
    "target": "node",
    "output": {
        "path": __dirname+'/static',
        "filename": "[name].[chunkhash:8].js"
    }
}

module.exports = config;

Answer №1

Here is a setup that has been effective for me:

.babelrc

{
    "presets": ["@babel/preset-env" ]
}

karma.conf.js

const webpackConfig = require('./webpack.config');

module.exports = function (config) {
  config.set({
    basePath: '.',
    autoWatch: false,
    singleRun: true,
    browsers: [ 'Chrome' ],
    frameworks: [ 'jasmine' ],
    files: [
      './src/test.js',
    ],
    preprocessors: {
      './src/**/*.js': [ 'webpack' ],
    },
    webpack: webpackConfig,
    webpackMiddleware: {
      noInfo: true,
      stats: 'error-only',
    },
  });
};

webpack.config.js

module.exports = {
    mode: 'development',
    devtool: 'none',
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
          },
        },
      ],
    },
    externals: {
      request: {
        commonjs: 'request',
        commonjs2: 'request',
      },
      os: {
        commonjs: 'os',
        commonjs2: 'os',
      },
      process: 'process',
    },
  };

./src/test.js

const testsContext = require.context(".", true, /spec$/);
testsContext.keys().forEach(testsContext)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How do I fix TypeError: req.flash is not a valid function?

While working with user registration on a website, validation is implemented using mongoose models and an attempt is made to use Flash to display error messages in the form. However, in my Node.js app, an error is occurring: TypeError: req.flash is not ...

Issue with Express/Node.js route unable to access key values within an object

I am currently struggling with creating a node/express route that fetches data from a MongoDB collection and facing an infuriating issue. The collection in question is named nba_players_v2, and I've tried crafting the following route: router.get(&apo ...

Issue with activating a Modal through a button inside a table row on React

I'm currently working on two files: Modal.js and Users.js. Users.js features a table with an API get query linked to it, and in the last column of the table, there's a dropdown for each row that contains three buttons: View, Edit, and Delete. My ...

How can you ensure the validation of a text box using JavaScript?

Is there a way to confirm that a text box exclusively contains letters, either through JavaScript or regular expressions? ...

Next.js server component allows for the modification of search parameters without causing a re-fetch of the data

I have a situation where I need to store form values in the URL to prevent data loss when the page is accidentally refreshed. Here's how I am currently handling it: // Form.tsx "use client" export default function Form(){ const pathname ...

Exploring React-Query's Search Feature

Looking for guidance on optimizing my Product search implementation using react-query. The current solution is functional but could be streamlined. Any suggestions on simplifying this with react-query would be greatly appreciated. import { useEffect, use ...

Problems with Atom's ternjs autocomplete feature

My project structure is as follows: https://i.sstatic.net/J9Pk4.png The content of .tern-project is: { "ecmaVersion": 6, "libs": [ "browser", "jquery" ], "loadEagerly": [ "/bower-components/d3/d3.js" ] } I attempted to change d3.j ...

How can I delete the onmouseover function in HTML?

Is there a way to remove the (onmouseover="mouseoversound.playclip()") function from the following HTML code? <a href="roster.html" onmouseover="mouseoversound.playclip()">Roster</a> Can we instead implement this functionality in a JavaScript ...

Update a DIV when ajax call is successful

I have a webpage with a specific heading: <div class="something"><? some php code ?></div> On this page, there is also an ajax function that performs a certain task: <script> $(document).ready(function () { $(document).ajaxSta ...

Switching the background color of a button on click and resetting the color of any previously clicked buttons (a total of 8

I'm struggling to implement a feature where only one button out of a column of 8 should be toggled yellow at a time, while the rest remain default green. Unfortunately, I can't seem to get the function to execute on click, as none of the colors a ...

Tips for updating this.state once the server goes offline

As a newcomer to React, I have been researching my question about dealing with server offline situations. My setup involves a server storing an array of student information, which is then rendered on the page when the server is online. However, I'm st ...

What changes can be made to the HTML structure to ensure that two form tags function separately?

Hey there! I'm currently tackling a web project that involves incorporating two form tags on one page, each with its own distinct purpose. Nevertheless, it appears that the inner form tag isn't behaving as it should. My suspicion is that this iss ...

Switching the hierarchy of list items in React

I have a JSON structure with nested elements. const JSON_TREE = { name: "PARENT_3", id: "218", parent: { name: "PARENT_2", id: "217", parent: { name: "PARENT_1", i ...

Tips for arranging images in a horizontal layout using FlatList in React Native

Is there a way to display feed images horizontally instead of vertically in FlatList? I've tried wrapping the images in a view with flex-direction set to row, as well as adding horizontal={true} to the FlatList, but nothing seems to work. Any suggesti ...

Utilizing Asynchronous Functions within a Loop

I have a situation where I am working with an array and need to make API calls for each index of the array. Once the API call is resolved, I need to append the result in that specific element. My goal is to ultimately return the updated array once this pro ...

Is it possible that only one number is printed when document.getElementById("demo").innerHTML = Math.ceil((Math.random()*10)-1); is executed?

How come the code document.getElementById(“demo”).innerHTML = Math.ceil((Math.random()*10)-1); is only displaying one number? function myFunction() { var bbb = document.getElementById("ilgis").value; for (i = 0; i <= bbb; i++) { //docum ...

Using regular expressions to extract data from a Solr query parameter FQ specifying a local tag

Currently, I am utilizing Ajax Solr for a development project. I am experimenting with the additive method in facet selection and successfully appending FQ values to breadcrumbs. The issue at hand is that I only want the value to be displayed in the bread ...

What is the best way to display an image upon clicking a button?

I have a <button> element with the rel="example.jpg" attribute. The goal is to have the image load in the #area DIV only after the button is clicked, not during the page load. I have implemented the following code to achieve this: $(document).ready( ...

Exploring the possibilities of combining OpenCV with web technologies like Javascript

I am currently faced with the challenge of integrating OpenCV into a web application using Express.js. While I am familiar with the Python and C++ libraries for OpenCV, I now need to work with it in conjunction with Express.js. My main requirements include ...

VueSax notifications are showing up in the wrong place

Could it be my fault or is it due to the alpha status of vuesax that the notifications I want to use are displaying incorrectly? Here is the code extracted from the documentation: openNotification (title_, text_) { //This code is placed inside Vue methods ...