Getting this error: Invalid LWC imported identifier "createElement" on a LWC test file when running force:deploy

See original GitHub issue

Description

We have added LWC Jest unit testing into our repo. In the lwc component’s test file we import “createElement”, per the Salesforce Jest documentation. When we run our tests from the terminal, they pass. We have **/__tests__/** listed in our .forceignore file, so when I run “SFDX:Deploy Source to Org” from VS Code on my lwc folder to my personal sandbox, I receive no errors. The problem occurs when we are using our CI/CD ADO pipeline to deploy our code to our dev sandbox (command force:deploy is run). It seems the test folder is not being ignored, and we receive this deploy error: Invalid LWC imported identifier “createElement”.

Steps to Reproduce

import { createElement } from 'lwc';
import HelperTextList from 'c/helperTextList';
describe('c-helper-text-list', () => {
    afterEach(() => {
        // The jsdom instance is shared across test cases in a single file so reset the DOM
        while (document.body.firstChild) {
            document.body.removeChild(document.body.firstChild);
        }
    });
    test('element has does not have comma when first item', () => {
        const element = createElement('c-helper-text-list', { is: HelperTextList });
        document.body.appendChild(element);
        // Property value is assigned after the component is inserted into the DOM
        element.index = 0;
        const span = element.shadowRoot.querySelector('span');
        
        // Use a promise to wait for asynchronous changes to the DOM
        return Promise.resolve().then(() => {
            expect(span.textContent).not.toBe(', ');
        });
    });
    test('element has does have comma when second item', () => {
        const element = createElement('c-helper-text-list', { is: HelperTextList });
        element.index = 1;
        document.body.appendChild(element);
        
        // Use a promise to wait for asynchronous changes to the DOM
        return Promise.resolve().then(() => {
            const span = element.shadowRoot.querySelector('.comma');
            expect(span.textContent).toBe(', ');
        });
    });
});
<!-- HTML for component under test -->
<template>
    <span class="comma" if:true={hasMultiple}>, </span>
    <span><slot></slot></span>
</template>
import { LightningElement, api } from 'lwc';

export default class HelperTextList extends LightningElement {
    @api index;
    hasMultiple = false;
    renderedCallback() {
        if (this.index >= 1) {
            this.hasMultiple = true;
        }
    }
}    
# List files or directories below to ignore them when running force:source:push, force:source:pull, and force:source:status
# More information: https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_exclude_source.htm
#

package.xml

# LWC configuration files
**/jsconfig.json
**/.eslintrc.json


# LWC Jest
**/__tests__/**
sfdx force:deploy

Expected Results

Files are deployed to the sandbox and the test files are ignored.

Actual Results

Deployment fails, error: 2020-07-16T19:28:13.5612990Z Error force-app\main\default\lwc\helperTextList_tests_\helperTextList.test.js [Line: 1, Col: 9] LWC1518: Invalid LWC imported identifier “createElement” 2020-07-16T19:28:13.6151707Z ERROR running force:source:deploy: Deploy failed.

Version

Possible Solution

Additional context/Screenshots

Screen Shot 2020-07-17 at 11 50 36 AM

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:26 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
ahebercommented, Aug 14, 2020

@paintingemily and I worked and found that their deployment pipeline was configured to drop the .forceignore file along the way. Ensuring the file progressed through the phases appears to have resolved the issue.

Waiting on @paintingemily to confirm and close.

1reaction
paintingemilycommented, Jul 28, 2020

@aheber – Apparently that version is from my local/VS Code, I assumed it was the same as CI. In our pipeline, we do a fresh install every time of sfdx – so the last release shows version: sfdx-cli@7.66.2

Read more comments on GitHub >

github_iconTop Results From Across the Web

LWC1702: Invalid LWC imported identifier "createElement"
Validation is failing due to this error . I have created new LWC component, it defaults created test.js file .I have removed and...
Read more >
createElement issue while pushing code to scratch org #48
... Col: 9] LWC1518: Invalid LWC imported identifier "createElement" ... I am getting this error thou when pushing to a regular Developer ...
Read more >
Deploy Source to Org is failing - Trailhead - Salesforce
LWC1518 : Invalid LWC imported identifier "createElement" (1:9). This error coming from bearLocationTest.js file which automatically created when i created ...
Read more >
How to Use Jest For Lightning Web Component Testing
Once the configuration is done, you will need to: Import the LWC method framework createElement. Use the afterEach method to clean the element....
Read more >
LWC Debugging and Testing with Toronto Salesforce ...
Debugging on org can be done by setting breakpoints in code once we enable Lightning to run in the debug mode. Use the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found