如何通过Jest测试Salesforce LWC中Div的onclick事件？

我在Salesforce中创建了一个LWC组件，正尝试为其编写Jest测试。HTML文件里实现了一个div，通过onclick事件调用JS函数，代码如下：

<div class="csa-utility-svg" onclick={handleShowMoreClick} data-id="showMoreButton">
  <label class="card-text-cursor-pointer">{labels.showMore_button} </label>
</div>

我尝试用两种方法测试这个onclick事件，都出现TypeError: Cannot read properties of null错误（获取到的元素为null）：

方法1：

element.shadowRoot.querySelector('div[data-id="showMoreButton"]').dispatchEvent(new CustomEvent('click'));

方法2：

const showMoreButton = element.shadowRoot.querySelector('div[data-id="showMoreButton"]');
expect(showMoreBtn.length).toBeGreaterThan(0);   // 验证元素存在
showMoreBtn[0].click();
await flushPromises();
});

1. 确认组件渲染条件 #

如果showMoreButton是基于属性、状态变量控制渲染的（比如if:true指令），测试时需要先设置对应值，确保元素能被渲染出来：

// 假设组件通过showButton属性控制按钮显示
element.showButton = true;
await flushPromises(); // 等待组件重新渲染完成

2. 修正变量名与选择器错误 #

方法2存在变量名不一致问题：定义的是showMoreButton，后续却用showMoreBtn，直接导致获取不到元素。同时querySelector返回单个元素，没有length属性，要统一变量名并调整判断逻辑：

const showMoreBtn = element.shadowRoot.querySelector('div[data-id="showMoreButton"]');
expect(showMoreBtn).not.toBeNull(); // 验证元素存在
showMoreBtn.click();
await flushPromises();

如果需要匹配多个元素，改用querySelectorAll，此时才能通过length判断数量。

3. 确保组件完成挂载 #

测试时要保证组件正确挂载到DOM并完成首次渲染，完整流程如下：

import { createElement } from 'lwc';
import MyComponent from 'c/myComponent';
import { flushPromises } from '@salesforce/test-utils-jest';

describe('c-my-component', () => {
  // 测试后清理DOM
  afterEach(() => {
    while (document.body.firstChild) {
      document.body.removeChild(document.body.firstChild);
    }
  });

  it('triggers handleShowMoreClick on button click', async () => {
    // 创建并挂载组件
    const element = createElement('c-my-component', {
      is: MyComponent
    });
    document.body.appendChild(element);
    await flushPromises(); // 等待组件首次渲染

    // 获取按钮元素
    const showMoreBtn = element.shadowRoot.querySelector('div[data-id="showMoreButton"]');
    expect(showMoreBtn).not.toBeNull();

    // 监听目标函数，验证点击触发
    const clickSpy = jest.spyOn(element, 'handleShowMoreClick');
    showMoreBtn.click();
    await flushPromises();

    expect(clickSpy).toHaveBeenCalled();
    clickSpy.mockRestore(); // 清理spy
  });
});

4. 处理标签依赖 #

如果labels.showMore_button是自定义标签，测试时需要提前模拟标签数据，避免因标签未加载导致组件渲染异常：

import { registerLdsTestWireAdapter } from '@salesforce/sfdx-lwc-jest';
import getLabels from '@salesforce/apex/LabelController.getLabels';

// 模拟标签获取接口
const mockGetLabels = registerLdsTestWireAdapter(getLabels);

beforeEach(() => {
  mockGetLabels.emit({ showMore_button: '显示更多' });
});

内容的提问来源于stack exchange，提问作者Ravi SFDC