分类： 闪电Web组件测试

学习目标

完成本单元后，您将能够：

• 编写测试以验证您的设置。
• 编写失败的测试，然后更改组件以使其通过。
• 识别基本的Jest命令。
• 解释生命周期挂钩。

从Lightning Web组件开始

要测试Lightning Web组件，我们首先必须有一个要测试的组件。

创建一个闪电Web组件

1. 在Visual Studio Code中，通过按Ctrl + Shift + P （Windows）或Cmd + Shift + P （macOS）打开命令面板。
2. 输入lightning web。
3. 选择SFDX：创建Lightning Web组件。不要使用SFDX：创建闪电组件。（这将创建一个Aura组件。）
4. 输入unitTest新组件的名称。
5. 按Enter键。
6. 再次按Enter接受默认值force-app/main/default/lwc。

这将在lwc目录中使用初始基本文件创建unitTest目录。

编写基本测试

玩笑测试的编写，保存和运行方式与为Aura Components的闪电测试服务编写的茉莉或摩卡测试不同。Jest测试仅在本地进行，并且独立于Salesforce保存和运行。实际上，如果尝试将Jest测试部署到Salesforce组织中，则会出现错误。尽管针对Lightning Web组件的Jest测试未部署到您的Salesforce组织中，但是请确保将它们与组件本身一起提交到版本控制。 

创建__tests__文件夹

测试文件需要与其他组件文件分开。在组件的bundle文件夹的顶层创建一个名为__tests__的文件夹。将此组件的所有测试保存在__tests__文件夹中。 

1. 在Visual Studio Code中，右键单击unitTest目录，然后选择“新建文件夹”。
2. 输入__tests__。
3. 按Enter键。

配置.forceignore

通过将__tests__文件夹提交到版本控制，与其他团队成员或系统共享测试。它们是您的项目和持续集成过程的重要组成部分。为了避免将它们部署到Salesforce，.forceignore文件为此输入了一个排除项。 

• 确保您的项目.forceignore文件包含以下排除项。如果没有，请添加它并保存文件。

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

   

创建Jest测试文件

我们的第一个测试很简单。我们有一个sum()函数，它希望将两个数字相加并作为参数传递给它。

1. 在Visual Studio Code中，右键单击__tests__目录，然后选择New File。
2. 输入sum.test.js。
3. 按Enter键。
4. 在新的测试文件中输入以下代码：

   import { sum } from '../sum';
     
   describe('sum()', () => {
     it('should add 1 and 2 returning 3', () => {
       expect(sum(1, 2)).toBe(3);
     });
   });

    
5. 保存文件。

运行测试

1. 在Visual Studio Code中，选择“查看” ，然后选择“终端”。这将在Visual Studio Code中打开一个终端。终端默认为当前项目的顶级目录。
2. 在终端中，从上一个单元执行以下命令：

   npm run test:unit

    
3. 由于缺少求和函数，测试失败。

让我们看看如何解决它。 

1. 在Visual Studio Code中，右键单击unitTest目录，然后选择New File。
2. 输入sum.js。
3. 按Enter键。
4. 在新文件中输入以下代码块：

   export function sum(x, y) {
     return x + y;
   }

    
5. 保存文件。
6. 在终端中再次运行测试：

   npm run test:unit

    
7. 测试通过。

恭喜你！您刚刚确认Jest已安装并正常工作。

让我们看一下测试代码，看看发生了什么。

import { sum } from '../sum';
  
describe('sum()', () => {
  it('should add 1 and 2 returning 3', () => {
    expect(sum(1, 2)).toBe(3);
  });
});

• 第1行sum从sum JavaScript文件导入导出的函数。
• 第3行是Jest测试套件的开始。该describe函数或块是一个测试套件，并接受两个参数。首先是对我们要测试的单位的描述，通常以名词的形式出现。第二个是保存一个或多个测试的回调函数。您也可以将describe测试套件相互嵌套以提高清晰度。
• 第4行是测试（it是的别名test）。该it函数或块也接受两个参数。首先是对我们期望的另一种描述，通常以动词开头。然后是一个建立测试并保存测试的断言或期望的回调函数。
• 第5行是expect声明成功条件的语句：该sum函数将添加两个参数1和2，并返回3。它toBe是许多 Jest匹配器之一。
  在第5行之后的行中添加另一个断言：

      expect(sum(1, 2)).not.toBeGreaterThan(3);

   
• 添加.not并.toBeGreaterThan确保该数字不大于3。您可以使用添加另一个Expect语句.not.toBeLessThan(3)。 

现在进行Lightning Web组件测试。

对Lightning Web组件的Jest测试应该隔离测试单个组件的行为，并且对外部组件或服务的依赖性最小。

再次执行该过程以创建unitTest测试文件

此测试将验证是否设置了属性，并将其添加到DOM后将显示正确的文本。

1. 右键单击__tests__目录，然后选择“新建文件”。
2. 输入unitTest.test.js。
3. 按Enter键。
4. 在新的测试文件中输入以下代码：

   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!');
     });
   });

    
5. 保存文件。
6. 在终端中再次运行测试：

   npm run test:unit

    
7. 测试失败：

   Test Suites: 1 failed, 1 passed, 2 total
   Tests:       1 failed, 1 passed, 2 total

    

在更新代码以获得通过测试之前，让我们看一下测试代码以了解需求。

• 第1行是新的。它createElement从lwc框架导入方法。仅在测试中可用。
• 第2行UnitTest从组件JavaScript控制器导入该类。
• 第4行开始describe测试套件块。
• 第5行是Jest清理方法。afterEach()是Jest的设置和清除方法之一。afterEach()在描述块中的每个测试之后运行。此afterEach()方法在测试结束时重置DOM。测试运行时，Jest没有运行浏览器。Jest使用jsdom来提供行为类似于浏览器的DOM或文档的环境。每个测试文件都有一个jsdom实例，并且不会在文件内部的测试之间重置更改。最佳实践是在测试之间进行清理，以使测试的输出不会影响任何其他测试。还有其他可用的设置和清除方法。检查资源。
• 第12行启动it测试块。
• 第13行是您使用导入createElement方法的位置。它创建组件的实例并将其分配给常量element。
• 第16expect行将断言unitNumber变量设置为5。这是我们要测试的第一个要求，首先unitNumber设置为5。
• 第18行实际上使用将该element代码添加到jsdom的版本中。该调用将Lightning Web组件附加到DOM并进行渲染，这也意味着将调用生命周期挂钩connectedCallback（）和renderedCallback（）（稍后会对此进行更多介绍）。document.bodyappendChild
• 第20行使用querySelector（标准DOM查询方法）在DOM中搜索div标签。使用element.shadowRoot作为父的查询。这是一个仅测试的API，可让您窥视阴影边界以检查组件的阴影树。
• 最后，第21行有expect看textContent的的div标签来断言“单元5还活着！” 在那儿。这是最终要求。声明文本正确。

要使测试通过，您需要向unitTest HTML和JavaScript文件中添加代码。我们将添加代码以满足要求。

1. 单击该unitTest.html文件将其打开。
2. 覆盖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>

    
3. 保存文件。
4. 单击该unitTest.js文件将其打开并用以下命令覆盖：

   import { LightningElement, api } from 'lwc';
   import { sum } from './sum';
     
   export default class UnitTest extends LightningElement {
     @api unitNumber = sum(2,3);
   }

    
5. 保存文件并运行测试：

   npm run test:unit

    
6. 所有测试通过。

测试异步DOM更新

当Lightning Web组件的状态更改时，DOM异步更新。为确保您的测试在评估结果之前等待更新完成，请返回已解决的Promise。为此，请将其余测试代码链接到已解决的Promise。Jest在结束测试之前等待Promise链完成。如果Promise以拒绝状态结束，则Jest无法通过测试。

1. 打开unitTest.test.js。
2. 在最后一个测试之后添加第二个测试。
   在此测试中，我们要验证属性更改将更新DOM中的文本。

     it('displays unit status with updated unitNumber', () => {
       const element = createElement('c-unit-test', {
        is: UnitTest
       });
       // Add the element to the jsdom instance
       document.body.appendChild(element);
       // Update unitNumber after element is appended
       element.unitNumber = 6
       const div = element.shadowRoot.querySelector('div');
       // Verify displayed unit status
       expect(div.textContent).toBe('Unit 6 alive!');
     });

    
3. 保存文件并运行测试。

   npm run test:unit

    
4. 您收到以下失败消息：

   Expected: "Unit 6 alive!"
   Received: "Unit 5 alive!"

    

这是怎么回事？该expect声明断言div.textContext应当为“ Unit 6 live”，但仍为“ Unit 5 live！”。为了查看更改，我们需要通过返回resolve来等待它Promise。 

1. expect在注释之后，将失败的语句替换为以下内容// Verify display unit status：

       expect(div.textContent).not.toBe('Unit 6 alive!');
       // Return a promise to wait for any asynchronous DOM updates. Jest
       // will automatically wait for the Promise chain to complete before
       // ending the test and fail the test if the promise rejects.
       return Promise.resolve().then(() => {
         expect(div.textContent).toBe('Unit 6 alive!');
       });

    
2. 使用与上次相同的命令来运行测试，或者使用上一单元的“运行Jest测试”部分中的其他选项之一。
3. 测试通过。

到现在为止还挺好。您在两个测试套件中有三个成功的测试。接下来，添加第四项测试，以便在输入字段更新时可以验证单元状态是否已更新。为此，请在输入字段中使用change事件。

1. 打开unitTest.test.js，如果它不是已经打开。
2. 在您添加的最后一个测试之后添加一行，并将此第三个测试添加到套件中：

     it('displays unit status with input change event', () => {
       const element = createElement('c-unit-test', {
         is: UnitTest
       });
       document.body.appendChild(element);
       const div = element.shadowRoot.querySelector('div');
       // Trigger unit status input change
       const inputElement = element.shadowRoot.querySelector('lightning-input');
       inputElement.value = 7;
       inputElement.dispatchEvent(new CustomEvent('change'));
       return Promise.resolve().then(() => {
         expect(div.textContent).toBe('Unit 7 alive!');
       });
     });

    
3. 保存文件并运行测试以查看失败的消息。
   您可以看到只运行了一个测试，而其他两个则被跳过。

让我们看一下正在测试的内容：

• 前几行应该很熟悉。您正在将UnitTest添加到中document.body，然后创建对的引用div。
• inputElement参照雷电输入字段来设置常数。
• 接下来，将该输入字段的值设置为7。
• 然后，我们使用事件类型为“ change”的事件dispatchEvent来触发事件CustomEvent。
• 该Promise是熟悉的，只有改变改变的输入字段的值。

让我们更新代码以使其通过。为此，将添加lightning-input到HTML文件，并将handleChange方法添加到JavaScript控制器。

1. 打开unitTest.html。
2. 将以下代码添加到中的lightning-card和之前div：

     <lightning-input
       label="Unit Number"
       value={unitNumber}
       onchange={handleChange} >
     </lightning-input>

    
3. 保存文件。
4. 打开unitTest.js。
5. 在@api unitNumber语句之后添加以下代码：

     handleChange(event) {
       this.unitNumber = event.target.value;
     }

    
6. 保存文件并运行测试。
7. 由于添加了input元素和JavaScript处理程序，因此测试通过。

测试生命周期挂钩

闪电Web组件具有由框架管理的生命周期。该框架创建组件，在DOM中添加和删除它们，并在组件状态改变时呈现DOM更新。有几种与生命周期交互的方法。 

将connectedCallback()组件插入DOM时会触发生命周期挂钩。在disconnectedCallback()当组件从DOM除去生命周期钩闪光。这些挂钩的一种用途是注册和注销事件监听器。 

看一下 lwc-recipes示例存储库中lmsSubscriberWebComponent中的代码，这 是一个很好的示例。

接下来，我们看一下为有线服务编写Jest测试。 

学习目标

完成本单元后，您将能够：

• 编写测试以验证您的设置。
• 编写失败的测试，然后更改组件以使其通过。
• 识别基本的Jest命令。
• 解释生命周期挂钩。

从Lightning Web组件开始

要测试Lightning Web组件，我们首先必须有一个要测试的组件。

创建一个闪电Web组件

1. 在Visual Studio Code中，通过按Ctrl + Shift + P （Windows）或Cmd + Shift + P （macOS）打开命令面板。
2. 输入lightning web。
3. 选择SFDX：创建Lightning Web组件。不要使用SFDX：创建闪电组件。（这将创建一个Aura组件。）
4. 输入unitTest新组件的名称。
5. 按Enter键。
6. 再次按Enter接受默认值force-app/main/default/lwc。

这将在lwc目录中使用初始基本文件创建unitTest目录。

编写基本测试

玩笑测试的编写，保存和运行方式与为Aura Components的闪电测试服务编写的茉莉或摩卡测试不同。Jest测试仅在本地进行，并且独立于Salesforce保存和运行。实际上，如果尝试将Jest测试部署到Salesforce组织中，则会出现错误。尽管针对Lightning Web组件的Jest测试未部署到您的Salesforce组织中，但是请确保将它们与组件本身一起提交到版本控制。 

创建__tests__文件夹

测试文件需要与其他组件文件分开。在组件的bundle文件夹的顶层创建一个名为__tests__的文件夹。将此组件的所有测试保存在__tests__文件夹中。 

1. 在Visual Studio Code中，右键单击unitTest目录，然后选择“新建文件夹”。
2. 输入__tests__。
3. 按Enter键。

配置.forceignore

通过将__tests__文件夹提交到版本控制，与其他团队成员或系统共享测试。它们是您的项目和持续集成过程的重要组成部分。为了避免将它们部署到Salesforce，.forceignore文件为此输入了一个排除项。 

• 确保您的项目.forceignore文件包含以下排除项。如果没有，请添加它并保存文件。

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

   

创建Jest测试文件

我们的第一个测试很简单。我们有一个sum()函数，它希望将两个数字相加并作为参数传递给它。

1. 在Visual Studio Code中，右键单击__tests__目录，然后选择New File。
2. 输入sum.test.js。
3. 按Enter键。
4. 在新的测试文件中输入以下代码：

   import { sum } from '../sum';
     
   describe('sum()', () => {
     it('should add 1 and 2 returning 3', () => {
       expect(sum(1, 2)).toBe(3);
     });
   });

    
5. 保存文件。

运行测试

1. 在Visual Studio Code中，选择“查看” ，然后选择“终端”。这将在Visual Studio Code中打开一个终端。终端默认为当前项目的顶级目录。
2. 在终端中，从上一个单元执行以下命令：

   npm run test:unit

    
3. 由于缺少求和函数，测试失败。

让我们看看如何解决它。 

1. 在Visual Studio Code中，右键单击unitTest目录，然后选择New File。
2. 输入sum.js。
3. 按Enter键。
4. 在新文件中输入以下代码块：

   export function sum(x, y) {
     return x + y;
   }

    
5. 保存文件。
6. 在终端中再次运行测试：

   npm run test:unit

    
7. 测试通过。

恭喜你！您刚刚确认Jest已安装并正常工作。

让我们看一下测试代码，看看发生了什么。

import { sum } from '../sum';
  
describe('sum()', () => {
  it('should add 1 and 2 returning 3', () => {
    expect(sum(1, 2)).toBe(3);
  });
});

• 第1行sum从sum JavaScript文件导入导出的函数。
• 第3行是Jest测试套件的开始。该describe函数或块是一个测试套件，并接受两个参数。首先是对我们要测试的单位的描述，通常以名词的形式出现。第二个是保存一个或多个测试的回调函数。您也可以将describe测试套件相互嵌套以提高清晰度。
• 第4行是测试（it是的别名test）。该it函数或块也接受两个参数。首先是对我们期望的另一种描述，通常以动词开头。然后是一个建立测试并保存测试的断言或期望的回调函数。
• 第5行是expect声明成功条件的语句：该sum函数将添加两个参数1和2，并返回3。它toBe是许多 Jest匹配器之一。
  在第5行之后的行中添加另一个断言：

      expect(sum(1, 2)).not.toBeGreaterThan(3);

   
• 添加.not并.toBeGreaterThan确保该数字不大于3。您可以使用添加另一个Expect语句.not.toBeLessThan(3)。 

现在进行Lightning Web组件测试。

对Lightning Web组件的Jest测试应该隔离测试单个组件的行为，并且对外部组件或服务的依赖性最小。

再次执行该过程以创建unitTest测试文件

此测试将验证是否设置了属性，并将其添加到DOM后将显示正确的文本。

1. 右键单击__tests__目录，然后选择“新建文件”。
2. 输入unitTest.test.js。
3. 按Enter键。
4. 在新的测试文件中输入以下代码：

   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!');
     });
   });

    
5. 保存文件。
6. 在终端中再次运行测试：

   npm run test:unit

    
7. 测试失败：

   Test Suites: 1 failed, 1 passed, 2 total
   Tests:       1 failed, 1 passed, 2 total

    

在更新代码以获得通过测试之前，让我们看一下测试代码以了解需求。

• 第1行是新的。它createElement从lwc框架导入方法。仅在测试中可用。
• 第2行UnitTest从组件JavaScript控制器导入该类。
• 第4行开始describe测试套件块。
• 第5行是Jest清理方法。afterEach()是Jest的设置和清除方法之一。afterEach()在描述块中的每个测试之后运行。此afterEach()方法在测试结束时重置DOM。测试运行时，Jest没有运行浏览器。Jest使用jsdom来提供行为类似于浏览器的DOM或文档的环境。每个测试文件都有一个jsdom实例，并且不会在文件内部的测试之间重置更改。最佳实践是在测试之间进行清理，以使测试的输出不会影响任何其他测试。还有其他可用的设置和清除方法。检查资源。
• 第12行启动it测试块。
• 第13行是您使用导入createElement方法的位置。它创建组件的实例并将其分配给常量element。
• 第16expect行将断言unitNumber变量设置为5。这是我们要测试的第一个要求，首先unitNumber设置为5。
• 第18行实际上使用将该element代码添加到jsdom的版本中。该调用将Lightning Web组件附加到DOM并进行渲染，这也意味着将调用生命周期挂钩connectedCallback（）和renderedCallback（）（稍后会对此进行更多介绍）。document.bodyappendChild
• 第20行使用querySelector（标准DOM查询方法）在DOM中搜索div标签。使用element.shadowRoot作为父的查询。这是一个仅测试的API，可让您窥视阴影边界以检查组件的阴影树。
• 最后，第21行有expect看textContent的的div标签来断言“单元5还活着！” 在那儿。这是最终要求。声明文本正确。

要使测试通过，您需要向unitTest HTML和JavaScript文件中添加代码。我们将添加代码以满足要求。

1. 单击该unitTest.html文件将其打开。
2. 覆盖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>

    
3. 保存文件。
4. 单击该unitTest.js文件将其打开并用以下命令覆盖：

   import { LightningElement, api } from 'lwc';
   import { sum } from './sum';
     
   export default class UnitTest extends LightningElement {
     @api unitNumber = sum(2,3);
   }

    
5. 保存文件并运行测试：

   npm run test:unit

    
6. 所有测试通过。

测试异步DOM更新

当Lightning Web组件的状态更改时，DOM异步更新。为确保您的测试在评估结果之前等待更新完成，请返回已解决的Promise。为此，请将其余测试代码链接到已解决的Promise。Jest在结束测试之前等待Promise链完成。如果Promise以拒绝状态结束，则Jest无法通过测试。

1. 打开unitTest.test.js。
2. 在最后一个测试之后添加第二个测试。
   在此测试中，我们要验证属性更改将更新DOM中的文本。

     it('displays unit status with updated unitNumber', () => {
       const element = createElement('c-unit-test', {
        is: UnitTest
       });
       // Add the element to the jsdom instance
       document.body.appendChild(element);
       // Update unitNumber after element is appended
       element.unitNumber = 6
       const div = element.shadowRoot.querySelector('div');
       // Verify displayed unit status
       expect(div.textContent).toBe('Unit 6 alive!');
     });

    
3. 保存文件并运行测试。

   npm run test:unit

    
4. 您收到以下失败消息：

   Expected: "Unit 6 alive!"
   Received: "Unit 5 alive!"

    

这是怎么回事？该expect声明断言div.textContext应当为“ Unit 6 live”，但仍为“ Unit 5 live！”。为了查看更改，我们需要通过返回resolve来等待它Promise。 

1. expect在注释之后，将失败的语句替换为以下内容// Verify display unit status：

       expect(div.textContent).not.toBe('Unit 6 alive!');
       // Return a promise to wait for any asynchronous DOM updates. Jest
       // will automatically wait for the Promise chain to complete before
       // ending the test and fail the test if the promise rejects.
       return Promise.resolve().then(() => {
         expect(div.textContent).toBe('Unit 6 alive!');
       });

    
2. 使用与上次相同的命令来运行测试，或者使用上一单元的“运行Jest测试”部分中的其他选项之一。
3. 测试通过。

到现在为止还挺好。您在两个测试套件中有三个成功的测试。接下来，添加第四项测试，以便在输入字段更新时可以验证单元状态是否已更新。为此，请在输入字段中使用change事件。

1. 打开unitTest.test.js，如果它不是已经打开。
2. 在您添加的最后一个测试之后添加一行，并将此第三个测试添加到套件中：

     it('displays unit status with input change event', () => {
       const element = createElement('c-unit-test', {
         is: UnitTest
       });
       document.body.appendChild(element);
       const div = element.shadowRoot.querySelector('div');
       // Trigger unit status input change
       const inputElement = element.shadowRoot.querySelector('lightning-input');
       inputElement.value = 7;
       inputElement.dispatchEvent(new CustomEvent('change'));
       return Promise.resolve().then(() => {
         expect(div.textContent).toBe('Unit 7 alive!');
       });
     });

    
3. 保存文件并运行测试以查看失败的消息。
   您可以看到只运行了一个测试，而其他两个则被跳过。

让我们看一下正在测试的内容：

• 前几行应该很熟悉。您正在将UnitTest添加到中document.body，然后创建对的引用div。
• inputElement参照雷电输入字段来设置常数。
• 接下来，将该输入字段的值设置为7。
• 然后，我们使用事件类型为“ change”的事件dispatchEvent来触发事件CustomEvent。
• 该Promise是熟悉的，只有改变改变的输入字段的值。

让我们更新代码以使其通过。为此，将添加lightning-input到HTML文件，并将handleChange方法添加到JavaScript控制器。

1. 打开unitTest.html。
2. 将以下代码添加到中的lightning-card和之前div：

     <lightning-input
       label="Unit Number"
       value={unitNumber}
       onchange={handleChange} >
     </lightning-input>

    
3. 保存文件。
4. 打开unitTest.js。
5. 在@api unitNumber语句之后添加以下代码：

     handleChange(event) {
       this.unitNumber = event.target.value;
     }

    
6. 保存文件并运行测试。
7. 由于添加了input元素和JavaScript处理程序，因此测试通过。

测试生命周期挂钩

闪电Web组件具有由框架管理的生命周期。该框架创建组件，在DOM中添加和删除它们，并在组件状态改变时呈现DOM更新。有几种与生命周期交互的方法。 

将connectedCallback()组件插入DOM时会触发生命周期挂钩。在disconnectedCallback()当组件从DOM除去生命周期钩闪光。这些挂钩的一种用途是注册和注销事件监听器。 

看一下 lwc-recipes示例存储库中lmsSubscriberWebComponent中的代码，这 是一个很好的示例。

接下来，我们看一下为有线服务编写Jest测试。 

学习目标

完成本单元后，您将能够：

• 描述Jest测试框架。
• 描述Node.js和npm的角色。
• 安装Node.js和npm。
• 在Salesforce DX项目中安装@ salesforce / sfdx-lwc-jest JavaScript模块。

在你开始之前

要完成此模块，您需要安装和更新Salesforce CLI，Visual Studio Code和用于Visual Studio Code的Salesforce Extensions。为了满足这些先决条件，我们建议您在继续之前完成 快速入门：Salesforce DX， 快速入门：Visual Studio Code for Salesforce开发和 快速入门：Lightning Web Components 项目。

创建一个Salesforce DX项目

测试之前的第一步是创建一个Salesforce DX项目，以存储您的Lightning Web组件和Jest测试。

1. 在Visual Studio Code中，通过按Ctrl + Shift + P （Windows）或Cmd + Shift + P （macOS）打开命令面板。
2. 输入sfdx。
3. 选择SFDX：创建项目。如果看不到此选项，请在继续之前完成本模块第一个单元中的前提条件。
4. 选择标准。
5. 输入test-lwc作为项目名称。
6. 按Enter键。
7. 选择一个文件夹来存储项目。
8. 单击创建项目， 然后等待新的Visual Studio Code窗口打开。
9. 单击查看，然后选择终端。这将在Visual Studio Code中打开一个终端窗口。终端默认为项目的顶级目录。您稍后需要终端在该项目的工作目录中运行命令。

什么是Node.js和npm？

Node.js是一个基于Chrome的V8 JavaScript引擎的JavaScript运行时，而npm是一个用于分发可重用代码模块的程序包管理器。在Node.js和npm的世界中，这些可重用的代码模块称为Node模块。在Salesforce术语中，Node模块（可以轻松地分发到多个项目的可重用代码）类似于 解锁包。

Node.js和npm是现代JavaScript开发人员工具箱中流行的工具。在“ 学习使用JavaScript” 路径中了解有关现代JavaScript的更多信息 。

安装Node.js和npm

Jest是一个Node模块，因此要使用它，您需要安装Node和npm。现在开始吧。

1. 从安装Node.js的 https://nodejs.org/en/download/。我们建议使用LTS（长期支持）版本。
2. 确认已安装Node.js。在我们先前打开的Visual Studio Code终端中，输入以下命令。node --version复制
3. 您应该会看到类似的输出v12.13.0或更高版本。
4. 当您安装Node.js时，npm也会自动安装。
   在终端中，输入以下命令。npm --version复制您应该会看到类似的输出6.13.0或更高版本。注意您可能需要更新npm，因此请访问 npmjs文档 以获取有关针对不同操作系统升级npm的更多详细信息。

什么是Jest？

Jest是功能强大的工具，具有编写JavaScript测试的丰富功能。Jest可以收集代码覆盖率信息，并支持模拟以帮助将测试与复杂的依赖项隔离。玩笑测试不会在浏览器中运行或连接到组织，因此运行速度很快。使用Jest编写所有Lightning Web组件的单元测试。要对Lightning Web组件运行Jest测试，您需要在Salesforce DX项目中使用@ salesforce / sfdx-lwc-jest节点模块。

注意

Jest测试仅适用于Salesforce DX项目中的Lightning Web组件，不适用于Aura组件。对于Aura组件，请参阅 使用Lightning Testing Service测试组件。

安装sfdx-lwc-jest节点模块

该@salesforce/sfdx-lwc-jest节点模块，您可以编写，运行和调试玩笑试验闪电Web组件。通过Salesforce CLI，可以轻松地将Jest及其依赖项安装到项目中。

1. 在Visual Studio Code终端中，在Salesforce DX项目的顶级目录中运行以下命令：sfdx force:lightning:lwc:test:setup复制这将安装npm并@salesforce/sfdx-lwc-jest进入项目。结果应如下所示：

您可能会注意到该过程发现了一些漏洞。就我们的目的而言，这很好。这些不是您要查找的漏洞。

注意

对于其他安装Jest Node模块的方式，Salesforce @salesforce/sfdx-lwc-jest在https://www.npmjs.com/package/@salesforce/sfdc-lwc-jest上的npm上以JavaScript软件包的形式提供Node模块， 并以开源项目的形式提供该模块 在GitHub上 https://github.com/salesforce/sfdx-lwc-jest上。

运行Jest测试

太好了，您设置了Salesforce DX项目以能够运行稍后在此模块中编写的Jest测试。现在已经完成了所有工作，有几种方法可以运行Jest测试。您可以直接调用脚本，使用npm命令，也可以使用Visual Studio Code中的单击。您可以在文件或项目中运行一个测试或所有测试。当测试涵盖的代码更改时，您甚至可以自动运行测试。

让我们看一下运行Jest测试的不同方法。

sfdx-lwc-jest节点命令

您可以使用以下Node命令直接从项目中的脚本安装位置运行脚本。

1. 在Visual Studio Code终端中，在Salesforce DX项目的顶级目录中，输入以下命令。node node_modules/@salesforce/sfdx-lwc-jest/bin/sfdx-lwc-jest目前还没有Jest测试，因此您应该看到类似的输出No tests found, exiting with code 1。

这是一个很好的开始，但是让我们看一下如何通过自动化使它变得更好。

使用Package.json和npm自动执行测试脚本

进行单元测试的目的是促进开发人员在其开发和持续集成过程中编写和运行它们，以便尽早发现并修复错误。一遍又一遍地记住和键入长命令对您的目标适得其反。自动化就在这里。

npm具有一些非常好的现成的脚本自动化灵活性。早期运行安装会scripts在项目根目录的package.json文件的属性中添加了一系列选项。

{
  "name": "test-lwc",
  ...  "scripts": {
    ...
    "test:unit": "sfdx-lwc-jest",
    "test:unit:watch": "sfdx-lwc-jest --watch",
    "test:unit:debug": "sfdx-lwc-jest --debug",
    "test:unit:coverage": "sfdx-lwc-jest --coverage",
    ...
  },
  ...}

如果要为项目运行所有测试，请从项目的基本目录运行此npm命令。

npm run test:unit

如果要在特定目录中运行测试，则在特定目录中使用上面的命令将仅在该目录中运行测试。这使您可以隔离正在测试的内容。

在开发过程中连续运行测试

要在每次保存更改时对单个组件运行所有测试，请将目录更改为组件目录，然后运行下面的npm命令，该命令将sfdx-lwc-jest与该--watch参数一起使用。如上所述，您还可以从项目的基础上运行此代码，并针对每个更改运行项目中的所有测试。Git需要初始化--watch才能从命令行工作。

npm run test:unit:watch

初始化Git后，Jest现在会监视所有组件文件的更新，并在每次检测到更改时运行所有相关测试。

在Jest调试模式下运行测试

要以调试模式运行项目的Jest测试，请运行下面的npm命令，该命令将sfdx-lwc-jest与--debug参数一起使用。 

npm run test:unit:debug

有关对Jest问题进行故障排除的信息，请参阅《 Jest：故障排除》。

运行测试并显示代码覆盖率

要查看测试的代码覆盖率，请使用以下--coverage选项。 

npm run test:unit:coverage

在Visual Studio Code中通过单击运行测试

Salesforce Visual Studio Code扩展为运行Jest测试提供了很多控制和视觉反馈。它为您提供了运行单个，多个或所有测试的选项。--watch由于Git已预安装在Visual Studio Code中，因此它还使您能够在文件上使用该选项。 

单击测试烧杯图标 以打开“测试”侧栏。如果看不到该图标，则可能需要创建一个新的SFDX项目。在“测试”侧栏中，有一个LWC测试部分，显示项目中的所有Jest测试。这是项目中的测试侧边栏的外观。

单击Play按钮 以在一个项目中运行一个或多个测试。将光标悬停在目录或单个测试上以显示播放按钮。运行测试时，结果将显示在终端中。边栏中的颜色也指示结果。绿色表示通过。蓝色表示未运行，橙色表示已跳过测试，红色表示测试失败。单击侧边栏中的测试将打开文件，然后直接转到该测试。

单击刷新图标 以清除测试结果。

测试文件视图中也有直接控件。

单击主工具栏中的播放按钮 以运行文件中的所有测试。您也可以单击 文件中每个测试上方的运行测试以运行该特定测试。

要在每次保存更改时运行文件中的所有测试，请单击主工具栏中的监视图标 。当您在文件中进行测试时，这是一个很好的选择。

哇！这需要很多。 

好吧，让我们编写一些测试。

学习目标

完成本单元后，您将能够：

• 描述单元测试和端到端测试之间的目的和区别。
• 解释闪电Web组件的单元测试的作用。

先决条件

在本模块中，您将使用Visual Studio代码编辑器在Salesforce DX项目中开发Lightning Web组件和单元测试。如果您不熟悉Lightning Web组件，Salesforce DX或使用Visual Studio Code进行Salesforce开发，我们建议您完成 快速入门：Salesforce DX， 快速入门：Visual Studio Code for Salesforce开发和 快速入门：Lightning Web组件 在继续之前进行项目。

为什么测试很重要

“在设计阶段未检测到的任何错误将在编码阶段花费十倍的时间来进行检测，而在调试阶段将花费十倍的时间。” 

博士 Nikolai Bezroukov，调试的艺术

调试和测试是相关的，但在软件开发中是不同的过程。测试尝试查找并报告错误。调试尝试找出这些错误的原因并进行修复。根据Nikolai Bezroukov博士的说法，在发现和压缩代码中的错误时，越早越好。

在理想的世界中，软件不会有任何错误。但是现实是，我们会犯错误，需求会被误解，应用程序会以无法预料的方式使用。测试有助于发现这些问题，以便可以解决它们。您发现错误的时间越早，它们就越“便宜”。一旦错误进入开发的下一阶段（或在最坏的情况下为生产），就会有更多的人员和流程参与其中，以进行识别和修复。

对于Salesforce应用程序通常执行两种类型的测试：单元测试和端到端测试。它们的区别在于范围和目的。

单元测试

单元测试的重点是测试应用程序中小的离散功能。为了促进单元测试，请使用可测试的小型单元来构建应用程序，而不是编写单个长的Apex方法或类。这意味着将代码模块化为可以独立测试的离散方法。同样，与其为应用程序编写单个庞大的Lightning组件，不如将功能模块化为较小的组件，这些组件可以独立进行测试。易于运行的简短，快速的单元测试鼓励开发人员在其开发和持续集成过程中编写和运行它们。这样可以确保尽快发现并修复错误。请务必查看 测试驱动开发（TDD）， 以更深入地了解此过程。

端到端测试

端到端测试专注于测试整个应用程序或用户旅程。对于Web应用程序，这通常涉及在浏览器中进行测试，以验证页面上的代码和组件在测试环境（例如沙箱或草稿组织）中如何协同工作。

端到端测试往往比单元测试慢，因为它们在每个测试中覆盖了应用程序的更多功能。由于实时环境的随机不一致（例如网络延迟，缓存，对第三方系统的依赖性，基础结构问题等），端到端测试的可靠性也低于单元测试。这些不一致会导致测试一次通过，而下一次失败，这称为拍打测试。尽管存在这些缺点，但是与单元测试相比，端到端测试为应用程序及其集成点提供了有价值的，更实际的验证。

单元测试与端到端测试

让我们看一下单元测试和端到端测试在实践中如何工作。作为示例，我们将使用 lwc-recipes存储 库中 的api- 属性 Lightning Web组件，这 是Salesforce平台上Lightning Web Components的代码示例集合。

该<c-api-property>组件由（1）<lightning-card>，（2）<lightning-input>和（3）<c-chart-bar>组件组成。

1. 该<lightning-card>组件显示ApiProperty标题，并包含其他两个组件。
2. 该<lightning-input>组件处理用户的数字输入并广播值更改事件。
3. 该<c-chart-bar>组件根据其百分比值呈现条形图。

这三个组件中的每一个都有其自己的公共API，内部状态和行为。这些组件中的每个组件都可以具有自己的单元测试，以与其他组件隔离来验证其功能。事实上，对于在单元测试<c-api-property>组件可以假设<lightning-card>，<lightning-input>和<c-chart-bar>如预期的组件将执行，或者它可以模拟它们的行为在各种条件下，以模拟不同的方案。

在此示例中，端到端测试会将<c-api-property>组件加载到浏览器页面中，在输入字段中输入百分比值，并断言相应的条形图渲染。作为端到端测试，没有任何数据或行为的模拟—您正在确认所有三个组件如何协同工作，就像它们部署到用户时一样。

摘要

下表是单元测试和端到端测试的优缺点的高级比较。 

既然您对单元测试和端到端测试之间的区别有了更多的了解，让我们看看它是如何在实践中完成的。本模块的其余部分着重于对Lightning Web组件进行单元测试。