Тестирование кармы и headlessChrome завершается неудачно, когда я пытаюсь протестировать веб-компоненты, которые импортируют внешние файлы CSS (импорт CSS из "styles.css") - PullRequest
Новая
       28

Тестирование кармы и headlessChrome завершается неудачно, когда я пытаюсь протестировать веб-компоненты, которые импортируют внешние файлы CSS (импорт CSS из "styles.css")

2 голосов
/ 28 октября 2019

Я пытаюсь проверить веб-компонент, созданный с помощью lit-element.

Я использую open-wc с кармой для тестирования. Мой файл веб-компонента импортирует файл css, который будет добавлен в класс веб-компонента. Если я импортирую какой-либо файл css в компонент, тест этого компонента не пройден. Если я не импортирую css, тест пройден

Я использую karma-webpack для переноса кода (управляюимпорт файлов css), а затем протестируйте его. Я использовал «нулевой» загрузчик для управления css файлами (я не собираюсь проверять css)

Мой karma.conf файл 

/* 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;
};

Мой testedComponent.jsfile 

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>
  `);
  });
});

Я ожидал, что тест будет выполнен, но получил ошибку в изображении: ошибка кармы

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

Однако, если я прокомментирую импорт css, будут выполнены тесты

testedComponent.js файла без css импорт 

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);
...