Stencil单元测试：如何mock初始状态及使用newSpecPage操作状态？

针对你使用Stencil测试框架编写单元测试的两个问题，解答如下：

1. 测试@State为true时green-div是否正常加载的实现方式 #

@State是Stencil组件的内部状态，无法在初始化newSpecPage时直接传入初始值，你可以通过组件实例直接修改状态后触发重渲染来实现测试需求，示例代码如下：

import { newSpecPage } from '@stencil/core/testing';
// 替换为你自己的组件类名和对应文件路径
import { MyComponent } from './my-component.tsx';

it('ifSuccessResponse为true时正常加载green-div', async () => {
  const page = await newSpecPage({
    components: [MyComponent],
    // 替换为你自己的组件标签名
    html: `<my-component></my-component>`,
  });
  // 直接修改组件实例的@State变量值
  page.rootInstance.ifSuccessResponse = true;
  // 等待Stencil触发状态更新和视图重渲染
  await page.waitForChanges();
  // 断言green-div存在
  expect(page.root.querySelector('.green-div')).not.toBeNull();
});

2. 运行时更新@State的实现方式 #

可以更新。Stencil测试工具没有提供和enzyme setState 完全同名的API，但可以通过**直接修改组件实例的@State属性 + 调用waitForChanges()**的方式实现完全等价的效果，示例代码如下：

it('切换ifSuccessResponse值时视图同步更新', async () => {
  const page = await newSpecPage({
    components: [MyComponent],
    html: `<my-component></my-component>`,
  });
  // 初始状态为false，断言red-div存在
  expect(page.root.querySelector('.red-div')).not.toBeNull();

  // 等价于enzyme的setState操作
  page.rootInstance.ifSuccessResponse = true;
  await page.waitForChanges();
  // 断言更新后green-div存在、red-div消失
  expect(page.root.querySelector('.green-div')).not.toBeNull();
  expect(page.root.querySelector('.red-div')).toBeNull();

  // 支持多次修改状态触发更新
  page.rootInstance.ifSuccessResponse = false;
  await page.waitForChanges();
  expect(page.root.querySelector('.red-div')).not.toBeNull();
});

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