I have the following in my html template using lwc:if:

<template lwc:if={showSpinner}>
    <lightning-spinner alternative-text="Loading" size="large"></lightning-spinner>

And here is my test:

describe('c-aggriddatatablev2', () => {
    afterEach(() => {
        // The jsdom instance is shared across test cases in a single file so reset the DOM
        while (document.body.firstChild) {

    it('TODO: test case generated by CLI command, please fill in test logic', () => {
        // Arrange
        const element = createElement('c-aggriddatatablev2', {
            is: Aggriddatatablev2qed

        // Act

        // Assert
        // const div = element.shadowRoot.querySelector('div');

But I receive the error:

LWC1127: Invalid directive "$lwc:if" on element <template>.

I've looked everywhere online and found nothing on what the problem is. Any idea?

  • If you're using a older project, it's possible LWR is out of date. Try using npm i to update your project's packages, and see if that helps?
    – sfdcfox
    Apr 17, 2023 at 10:26
  • @sfdcfox nope, that didn't work.
    – ViqMontana
    Apr 17, 2023 at 10:28
  • I have the same issue - npm i, npm update didn't make any difference. It doesn't look like github.com/salesforce/sfdx-lwc-jest has had any recent updates that would cover lwc:if Apr 24, 2023 at 8:55
  • 1
    Tell a lie - once I had updated my sfdx-lwc-jest reference in package.json, to the right version: "@salesforce/sfdx-lwc-jest": "^1.4.0", and ran npm install all was good. Prior to that it wouldn't take me up the version number. My lack of spotting the change in the git repo was probably because it's covered in a package dependency. Apr 24, 2023 at 9:34


You must log in to answer this question.

Browse other questions tagged .