Component testing issue with mounting vue custom elements Cypress Community #i-need-help

Component testing issue with mounting vue custom e...

jolly-night-56837

02/09/2023, 2:09 PM

The issue is, that no styles are injected currently. My test looks like this

Copy code

import { NdlNotifications } from "../../ndl-notifications";

describe("NdlNotifications", () => {
  it("renders", () => {
    cy.mount(NdlNotifications);
  });
});

The issue is, that the NdlNotifications component is a custom element and has the

.ce.vue

file ending. In the test runner it shows that it tries to mount

NdlNotifications.ce

My index file for NdlNotifications looks like this

Copy code

import { defineCustomElement } from "vue";
import NdlNotifications from "./NdlNotifications.ce.vue";

export { NdlNotifications };

export function register(tagName = "ndl-notifications") {
  customElements.define(tagName, defineCustomElement(NdlNotifications));
}

jolly-night-56837

02/09/2023, 2:53 PM

I have created a github repo. Please have a look at https://github.com/yavuzsecer88/cypress-vue-custom-elements The

.ce.vue

ending is necessary to use vue components as custom elements like

ndl-notifications />

You can start the application and see that the custom element is rendered with red color. In the test however the color is npt applied, since the test runner tries to load the module

NdlNotifications.ce

instead of

NdlNotifications

best-flower-17510

02/09/2023, 4:44 PM

cc: @wonderful-match-15836 any insight here? should this be in #1064948616449503232 channel?

jolly-night-56837

02/10/2023, 8:20 AM

I reposted this in component-testing. Should i delete this one here?

best-flower-17510

02/10/2023, 4:52 PM

yes please. Thank you.

8 Views

Previous Next