2

guys!

I'm trying to test my LWC component, but I keep getting TypeError. This is a simple as hell LWC component, that displays text in the center of a page. You enter text in an input, and, on a click of a button, you display it in the center of a component.

Could you lead me to the solution here?

lWCPractice.html

<template>
<lightning-card  variant="Narrow" class='slds-size_1-of-3'>
    <div class="slds-size_1-of-3 slds-var-p-left_small">
        <lightning-input class="slds-size_1-of-3" name="input1"></lightning-input>
        <br/>
        <lightning-button label="Click" onclick={handleClick} variant="brand"></lightning-button>
    </div>
    <center>{name}</center>
</lightning-card>

lWCPractice.js

 import { LightningElement, track } from "lwc";
export default class App extends LightningElement {
  @track name;
  handleClick() {
    let inp = this.template.querySelector("lightning-input");
    this.name = inp.value;
  }
}

lWCPractice.test.js

import { createElement } from "lwc";
import { LWCpractice } from 'c/lWCPractice';

describe("component 1", () => {
  afterEach(() => {
    while (document.body.firstChild) {
      document.body.removeChild(document.body.firstChild);
    }
  });

  it("for test purposes", () => {
    const EXPECTED = "test";

    const element = createElement('c-lwcpractice', {
      is: LWCpractice
    });
    document.body.appendChild(element);

    const CENTERNAME = element.shadowRoot.querySelector("center");
    expect(CENTERNAME.textContent).not.toBe(EXPECTED);
    const INPUT = element.shadowRoot.querySelector("lightning-input");
    INPUT.value = "input";
    INPUT.dispatchEvent(new CustomEvent("change"));
    const BUTTON = element.shadowRoot.querySelector("lightning-button");
    BUTTON.dispatchEvent(new CustomEvent("click"));

    expect(CENTERNAME.textContent).toBe(INPUT.value);
  });
});

Error message:

TypeError: "createElement" function expects a "is" option with a valid component constructor.

  14 |         const EXPECTED = 'test';
  15 | 
> 16 |         const ELEMENT = createElement('c-lwcpractice', {
     |                         ^
  17 |             is: LWCpractice,
  18 |         });
  19 |         document.body.appendChild(ELEMENT);

  at createElement (node_modules/@lwc/engine/src/framework/upgrade.ts:101:15)
  at Object.<anonymous> (force-app/main/default/lwc/lWCPractice/__tests__/lWCPractice.test.js:16:25)
  • You cannot create an element dynamically from Lwc. – rahul gawale Feb 5 at 9:27
  • @rahulgawale your comment is irrelevant to this question. You can create LWC components in tests – ytiq Feb 5 at 9:54
  • oops, retracted the close vote. thanks for notifying. @ytiq – rahul gawale Feb 5 at 9:59
2

Hello it's because you did incorrect import of the component. In component definition you have export default ..., so you need to import import LWCpractice from 'c/lWCPractice'; instead of import { LWCpractice } from 'c/lWCPractice';

try this

import { createElement } from "lwc";
import LWCpractice from 'c/lWCPractice';

describe("component 1", () => {
  afterEach(() => {
    while (document.body.firstChild) {
      document.body.removeChild(document.body.firstChild);
    }
  });

  it("for test purposes", () => {
    const EXPECTED = "test";

    const element = createElement('c-lwcpractice', {
      is: LWCpractice
    });
    document.body.appendChild(element);

    const CENTERNAME = element.shadowRoot.querySelector("center");
    expect(CENTERNAME.textContent).not.toBe(EXPECTED);
    const INPUT = element.shadowRoot.querySelector("lightning-input");
    INPUT.value = "input";
    INPUT.dispatchEvent(new CustomEvent("change"));
    const BUTTON = element.shadowRoot.querySelector("lightning-button");
    BUTTON.dispatchEvent(new CustomEvent("click"));

    expect(CENTERNAME.textContent).toBe(INPUT.value);
  });
});
| improve this answer | |
  • Wow, that is so unobvious! I expected the mistake to be exactly in 'it' block, because that's where jest notified me, where it is. Thank you! – LostSoul325 Feb 5 at 10:43
  • well, it said there should be a Valid component constructor, so I started checking constructor) – ytiq Feb 5 at 11:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.