Question

我有一个非常基本的香草web组件，并且我一直在研究如何正确地对其进行单元测试。作为最基本的测试，我只想测试是否可以在其上找到一个div。

我正在尝试使用业力夹具。坦率地说，我虽然可以使用Jasmine依赖，但我可以直接使用Fixture，但是由于错误，我似乎必须包含一个明确的Fixture依赖，所以我尝试了karma-fixture

在添加业力夹具之前，我就获得了

ReferenceError: fixture is not defined
            at <Jasmine>
            at UserContext.<anonymous> (test/my-component.test-without-openwc.js:19:16)
            at <Jasmine>

现在添加业力固定装置后，我得到了粘贴在此问题主题中的错误

 ReferenceError: Cannot find fixture 'spec/fixtures/<my-component></my-component>'
at <Jasmine>
at Fixture._throwNoFixture (node_modules/karma-fixture/lib/fixture.js:141:13)
at Fixture.load (node_modules/karma-fixture/lib/fixture.js:78:18)
at UserContext.<anonymous> (test/my-component.test-without-openwc.js:20:30)
at <Jasmine>

我不知道可以尝试什么。我的直接问题是：为什么我会收到此错误？疑惑重重的疑惑是：

1-茉莉花依赖性不足以使用夹具吗？ 2-我可以使用夹具借出我的香草Web组件，然后检查是否可以找到某些标签吗？

我要检查是否有

的香草Web组件

const templateString = `<div id="mydiv" name="mydiv"><p>Hello world 2!</p></div>`;
const template = document.createElement("template");
template.innerHTML = templateString;

export class MyComponent extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: "open" });
    shadowRoot.appendChild(template.content.cloneNode(true));
  }
}
customElements.define("my-component", MyComponent);

karma.conf.js

module.exports = function(config) {
  config.set({
    basePath: "",
    frameworks: ["fixture","jasmine"],
    files: [
      "node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js",
      {
        pattern: "**/*.test-without-openwc.js",
        type: "module",
        included: true
      },
      { pattern: "**/*.js", type: "module", included: false }
    ],
    exclude: [],
    preprocessors: {},
    reporters: ["spec"],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ["Chrome"],
    singleRun: true,
    concurrency: Infinity
  });
};

业力测试（整个规格）

import { TestUtils } from "./test-utils.js";
import "../src/my-component.js";
describe("just test if it was rendered", () => {
  it("first try (using TestUtils)", async () => {
    const { shadowRoot } = await TestUtils.render("my-component");
    expect(shadowRoot.querySelector("#mydiv")).toBeTruthy();
  });

  it("second try (using fixture)", async () => {
    const el = await fixture.load("<my-component></my-component>");
    expect(el.success).to.be.false;
  });
});

整个项目：all files

ReferenceError：在<Jasmine>上找不到固定装置'spec / fixtures / <my-component> </my-component>'

0 个答案: