如何在StencilJS端到端测试中将函数作为属性传递并验证触发？

我来帮你捋清楚这个问题！你现在遇到的核心困扰是在Stencil E2E测试里，没办法正确传递函数类型的Prop，也没法验证它是否被触发。咱们先看看你原代码里的几个小问题，再给出修正方案：

原测试代码里的问题点 #

1. 重复设置Prop：你既用了page.$eval直接给元素赋值onClick，又调用了customButton.setProperty，其实后者才是Stencil官方推荐的Prop设置方式，前者不符合Stencil的Prop处理逻辑。
2. 事件触发方式错误：你用triggerEvent('onClick')来触发事件，但这个方法主要是用来触发组件自定义发射事件（也就是用@Event()装饰器定义的事件）；而你这里是原生button的click事件，直接调用click()方法就可以了。
3. 缺少必要的更新等待：修改Prop或者触发事件后，没有等待Stencil完成组件更新和事件处理，可能导致断言时机不对。

修正后的测试代码 #

it('should render the button and trigger onClick', async () => {
  // 创建一个jest模拟函数，用来追踪是否被调用
  const mockOnClick = jest.fn();

  const page = await newE2EPage({
    waitUntil: 'networkidle2',
  }); 
  await page.setViewport({ width: 400, height: 800 });
  await page.setContent('<custom-button>some text</custom-button>');

  // 找到自定义组件实例，设置onClick Prop
  const customButton = await page.find('custom-button');
  await customButton.setProperty('onClick', mockOnClick);
  await page.waitForChanges(); // 等待组件完成Prop更新

  // 验证组件成功渲染
  expect(customButton).not.toBeFalsy();

  // 穿透shadow DOM找到内部的原生button元素
  const buttonElement = await page.find('custom-button >>> button');
  // 触发原生click事件
  await buttonElement.click();
  await page.waitForChanges(); // 等待事件处理完成

  // 断言模拟函数被调用
  expect(mockOnClick).toHaveBeenCalled();
});

关键说明 #

• 正确设置Prop：通过page.find获取组件实例后，用setProperty方法设置Prop是Stencil E2E测试的标准方式，它会正确触发组件的Prop更新生命周期，确保函数被正确绑定到内部按钮上。
• 触发原生事件：内部的<button>是原生DOM元素，直接调用click()方法就会触发它的onClick事件，进而调用你传递的mockOnClick函数。
• 关于浏览器看不到事件绑定：你在浏览器调试里看不到click事件绑定是正常的——因为你是通过Prop传递函数，直接在render里赋值给按钮的onClick，不是通过addEventListener添加的监听器，所以不会出现在浏览器的事件监听器面板里，但功能是完全正常的。

备注：内容来源于stack exchange，提问作者wasilikoslow