本篇参看:
https://trailhead.salesforce.com/content/learn/modules/test-lightning-web-components
https://jestjs.io/docs/en/expect
我们在写lwc的js部分时,通常都是前端进行测试,针对js测试其实也有类似于apex class中的 test class类似的js test class,也就是今天说的 Jest Test,Jest Test不只是针对于 lwc可以使用,正常其他的非salesforce的javascript代码同样可以进行使用测试,所以本篇 Jest Test使用只是基于最简单的方式去讲解,深入学习还要看篇头的两个链接自行学习。vs code studio使用 Jest Test步骤如下:
一. 安装node.js以及npm
因为jest是node的一个模块,所以想使用jest功能需要先安装node.js,当正确安装完node.js以后,npm也会自动安装完成。node下载地址为:https://nodejs.org/en/download/,我们选择一个需要的版本进行下载安装即可,官方建议LTS 版本。
安装好以后输入 node --version 以及 npm --version以后,正确展示版本信息即证明已经安装成功。
二. 安装 sfdx-lwc-jest 模块
这里有多种方式可以安装,通过CLI的指令:sfdx force:lightning:lwc:test:setup 或者通过npm安装也可以: npm install & npm install @salesforce/sfdx-lwc-jest --save-dev。这里demo使用第二种方式
三. jest 语法实现
jest语法根据不同的js内容复杂度以及难易程度不同,篇头链接为官方文档包含了各种场景,下面只是讲一个最基础的官方的demo来抛砖引玉。
先展示一下模块的层级结构,我们创建了一个lwc的模块,除了 __tests__这个目录,想必大家都很熟悉,包含自动生成的三个文件以及自己创建的一个 sum.js,这个js用于 unitTest.js的引用。我们为某个module创建 Jest Test文件,需要先在这个module下创建一个 __tests__目录,这个名字尽量写死成这个,并且我们需要在 .forceIgnore配置 /__tests__/,意思为当上传代码的时候,目录名称为 __tests__里面的文件将不会部署。所以如果在其他的module中创建的目录不是 __tests__情况下,还需要在 .forceIgnore中维护相关名称,为了统合,建议都起这个目录名称。
我们在 sum.js中封装了一个加和的方法
export function sum(x, y) {
return x + y;
}
那我们如何对这个js文件进行写 jest test进行验证呢,首先,我们先创建一个在 __tests__目录下新建一个js文件,这个js文件通常按照js名称后面加.test.js方式创建,比如 sum.js我们对这个js写 test class新建的js文件名称可以起名sum.test.js
对代码进行分析:
import { sum } from '../sum';
describe('sum()', () => {
it('should add 1 and 2 returning 3', () => {
expect(sum(1, 2)).toBe(3);
});
});
我们写完了应该如何运行呢,jest test是基于本地端运行的,所以很快,在vs code中,我们只要方法中点击run test即可运行当前的方法。想要批量运行所有的jest test也是支持的,trailhead中有具体的描述。
结果展示
这个demo过于简单,但是大概的说了一下 js test时包含几部分,以及怎么步骤去进行测试。我们在lwc只有工具类可能有这么简单的代码,其他的都是 extends LightningElement 或者类似相关的js写法。这种方式创建 jest test和上面还是有很大区别,接下来进行一下扩展,看一下场景的lwc js应该如何写 jest test。
unitTest.js:引用 sum.js中的 sum方法,设置给 unitNumber变量
import { LightningElement, api } from 'lwc';
import { sum } from './sum';
export default class UnitTest extends LightningElement {
@api unitNumber = sum(2,3);
}
unitTest.html:简简单单的在前端展示这个值
<template>
<lightning-card title="Unit Status" icon-name="standard:bot">
<div class="slds-m-around_medium">
Unit {unitNumber} alive!
</div>
</lightning-card>
</template>
这种情况的 jest test应该按照下面的步骤写,解析也如下:
import { createElement } from 'lwc';
import UnitTest from 'c/unitTest';
describe('c-unit-test', () => {
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);
}
});
it('displays unit status with default unitNumber', () => {
const element = createElement('c-unit-test', {
is: UnitTest
});
expect(element.unitNumber).toBe(5);
// Add the element to the jsdom instance
document.body.appendChild(element);
// Verify displayed greeting
const div = element.shadowRoot.querySelector('div');
expect(div.textContent).toBe('Unit 5 alive!');
});
});
点击 Run Test以后便可以查看结果
总结: Jest Test不止应用在 lwc中,其他正常的 javascript也可以,lwc顶多封装了一些自己用的方式去扩展了操作,大部分断言验证操作还是使用标准的Jest,所以小伙伴如果项目中如果需要使用Jest Test来确定javascript的稳定性以及正确性,最好先熟练掌握 Jest Test文档。本篇只是抛砖引玉。篇中有错误地方欢迎指出,有不懂欢迎留言。