Karma testing and headlessChrome fail when I try to test webcomponents that import external css files (import css from "styles.css")

Question

I am trying to test a webcomponent created with lit-element.

I am using open-wc with karma for testing. My webcomponent file imports a css file that will be injected in the webcomponent class. If I import any css file in the component, the test of that component fails, If I do not import css, the test passes

I am using karma-webpack to transpile the code (manage the import of the css files) and later test it. I have used "null" loader to manage the css files (I am not going to test the css)

My karma.conf file

/* eslint-disable import/no-extraneous-dependencies */
const { createDefaultConfig } = require("@open-wc/testing-karma");
const merge = require("webpack-merge");

module.exports = config => {
  config.set(
    merge(createDefaultConfig(config), {
      files: [
        {
          pattern: config.grep ? config.grep : "src/**/*.test.js",
          type: "module",
          watched: false
        }
      ],
      preprocessors: {
        "src/**/*.test.js": ["webpack"]
      },
      webpack: {
        mode: "development",
        devtool: "inline-source-maps",
        resolve: {
          extensions: [".js", ".ts"],
          modules: ["src", "node_modules"]
        },

        module: {
          rules: [
            {
              test: /\.css$/,
              use: ["null-loader"]
            }
          ]
        }
      },
      esm: {
        nodeResolve: true
      },
      concurrency: Infinity
    })
  );
  return config;
};

My testedComponent.js file

import { html, LitElement } from "lit-element";
import styles from "./styles.css";

export class TestedComponent extends LitElement {
  render() {
    return html`
      <div>Test</div>
    `;
  }
}

customElements.define("tested-component", TestedComponent);

My testedComponent.test.js file

import { expect, fixture } from "@open-wc/testing";
import "./testedComponent.js";

describe("Testing", () => {
  it("component with css", async () => {
    const el = await fixture("<tested-component></tested-component>");
    expect(el).shadowDom.to.equal(`
    <div>Test</div>
  `);
  });
});

I expected the test to be executed, but I received the error in the image: karma error

HeadlessChrome 77.0.3865 (Mac OS X 10.14.6) ERROR failed to load file: src/components/vt-badge/testedComponent.test.js

However, if I comment the css import, the tests are executed

testedComponent.js file without css imports

import { html, LitElement } from "lit-element";
// import styles from "./styles.css";

export class TestedComponent extends LitElement {
  render() {
    return html`
      <div>Test</div>
    `;
  }
}

customElements.define("tested-component", TestedComponent);