and don’t become crazy

Solution

Using npm, install the following packages in your project (in devDependencies recommended)

• jest
• jest-environment-jsdom
• @lwc/jest-preset

and create a jest.config.js in the root of your project with the following content

const { defaults } = require('jest-config');
module.exports = {
preset:'@lwc/jest-preset',
moduleNameMapper: {
'^yourspacenamehere/(.+)$':'<rootDir>/$1/$1'
  }
};

finally run your test and that’s all, easy pease. 

now if you are using another lwc sources for example as lightning-base-components, you have to include in the moduleNameMapper as 

'lightning/(.*)':'<rootDir>/node_modules/lightning-base-components/src/lightning/$1/$1'

and add in transformIgnorePatterns as

['/node_modules/(?!lightning-base-components)']

the final file should be something like:

const { defaults } = require('jest-config');
module.exports = {
  preset: '@lwc/jest-preset',
  transformIgnorePatterns: ['/node_modules/(?!lightning-base-components)'],
  moduleNameMapper: {
    '^yourspacenamehere/(.+)$': '<rootDir>/$1/$1',
    'lightning/(.*)' : '<rootDir>/node_modules/lightning-base-components/src/lightning/$1/$1' 
  } 
};

Solution Details

If you are a curious person and you want to know the details of the solution, let’s dive into the details.

About LWS OSS

It’s a modern javascript framework to build applications, developed by Salesforce and used mainly in the salesforce platform. Now salesforce has released the code as open source and we have the possibility to create applications without relation to the platform. for more details visit https://lwc.dev/ 

About JEST

JEST is a test framework for javascript and can be used to create unit tests. This tool was created by Facebook, it’s open source and the favorite for salesforce projects when we are talking about LWC. you can get more information in https://jestjs.io/

About Node and NPM

Web developers had to learn javascript to develop interactive web applications, and one day a tool was created to use javascript in the server (and in your pc without a web browser), so immediately this was the favorite tool for web developers. And we have NPM, which is a tool included in NODE with the main objective to reuse and share code. more information in https://nodejs.org/

The current role of NODE in web development is through NPM, where we can install a lot of tools, some for development itself as JEST and other as lightning-base-components to use components previously created and to use directly in our app. In the second case usually is necessary a bundler as webpackage to resolve all the dependencies and join all the code in a way a web browser can understand.

About the packages

jest

It’s the prefered Salesforce javascript framework to perform the unit test in LWC, this is only used in the development stage and the recommended way to install is the following.

> npm install jest –save-dev

jest-environment-jsdom

Allow JEST to run a DOM environment (as a web browser) to perform the corresponding unit tests, as you can guess this is only for the development stage. recommended way to install is

> npm install jest-environment-jsdom –save-dev

@lwc/jest-preset

package created by salesforce to allow in an easy way to run LWC in JEST, this also only used in the development stage. recommended way to install is

> npm install @lwc/jest-preset –save-dev

lightning-base-components

package created by Salesforce and contains all the lightning component library. This is the same used in salesforce orgs. If you want to use this package it is also mandatory to include the @salesforce-ux/design-system package that contains the SLDS. 

for more details in the setup and configuration see 

• https://developer.salesforce.com/docs/platform/lwr/guide/lwr-slds.html
• https://developer.salesforce.com/docs/platform/lwr/guide/lwr-lwc.html

About the jest.config.js file

This file allows you to set up details for JEST to run correctly the unit tests, and some other preferences. you can see the full list in https://jestjs.io/docs/configuration

There are a lot of configurations, but for our proporse we will only focus on preset, transformIgnorePatterns, and moduleNameMapper.

preset

in this attribute we will set all the configuration given in the @lwc/jest-preset package and for this reason we added the line

preset: '@lwc/jest-preset'

transformIgnorePatterns

Jest has a stage preparation before starting the tests, and some files could not be supported and trigger an error during the process. you can get more information in https://jestjs.io/docs/code-transformation 

Some files inside of the directory of lightning-base-components present this problem, and for this reason we want to avoid the transformation with the following setup.

transformIgnorePatterns: ['/node_modules/(?!lightning-base-components)'],

moduleNameMapper

In this setup you must include the locations of the LWC modules to allow to JEST to resolve the references inside of the code, for this reason we include the following lines for our components and the lightning components (lightning-base-components).

moduleNameMapper: {
'^yourspacenamehere/(.+)$': '<rootDir>/$1/$1',
'lightning/(.*)' : '<rootDir>/node_modules/lightning-base-components/src/lightning/$1/$1'
}

Conclusions

setup JEST for LWC OSS could be tedious, but it will help you to save time and avoid headaches, as you know, unit test is a key feature to keep the quality for software projects.