3

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)
3
  • You cannot create an element dynamically from Lwc. Feb 5, 2020 at 9:27
  • @rahulgawale your comment is irrelevant to this question. You can create LWC components in tests
    – ytiq
    Feb 5, 2020 at 9:54
  • oops, retracted the close vote. thanks for notifying. @ytiq Feb 5, 2020 at 9:59

1 Answer 1

4

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);
  });
});
2
  • 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! Feb 5, 2020 at 10:43
  • well, it said there should be a Valid component constructor, so I started checking constructor)
    – ytiq
    Feb 5, 2020 at 11:03

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .