StencilJS 单元测试键盘事件？答案

【问题标题】：StencilJS unit testing keyboard event?StencilJS 单元测试键盘事件？
【发布时间】：2021-11-17 15:35:18
【问题描述】：

我想在 stencilJs 中为我的自定义 Web 组件编写单元测试，但不知道如何以正确的方式进行。这是我到目前为止所做的！

.tsx

...

  valueFormat(event: Event): void {
    const val = (event.target as HTMLInputElement).value;
    const format = Number.parseInt(val, 10);
    const newVal = format.toLocaleString(undefined, {
      minimumFractionDigits: 2,
    });
    this.value = newVal;
  }

.spec.tsx

it('should format value', async () => {
    const comp = new MyComponent();
    const spy = jest.spyOn(comp, 'valueFormat');

    comp.myInputEvent.emit();

    expect(spy).toHaveBeenCalled();
  });

我想测试这个案例，当我在输入字段中输入一个数字时，它会格式化它。所以我的 valueFormat() 方法应该在键盘事件触发时调用。希望你能帮帮我！

【问题讨论】：

标签： reactjs jestjs event-handling stenciljs

【解决方案1】：

如果您想在考虑事件的情况下对其进行测试，我强烈建议您使用 newSpecPage(https://stenciljs.com/docs/unit-testing) - 因为这将允许您在内存中构建组件 DOM 并允许您测试其逻辑（所以您可以轻松触发诸如单击、键盘或触发输入值更改之类的事件，我假设您的 valueFormat() 方法在哪里被调用/绑定？）

另一种方法是将格式化逻辑移动到单独的函数，该函数仅将输入值作为参数，例如：

formatInputValue(value: string) {
  const format = Number.parseInt(value, 10);
  const newVal = format.toLocaleString(undefined, {
    minimumFractionDigits: 2,
  });
  return newVal;
}

然后您可以通过简单地构建组件然后使用您想要测试的任何值调用该方法来轻松地对该方法进行单元测试（如果您想测试诸如 null、空值、非数值等边缘情况，这很有用.)

就我个人而言，我不会费心创建函数，因为转换逻辑似乎很简单——通过 DOM 进行测试（使用 newSpecPage()）的另一个优点是，如果你想改变你的格式化逻辑，你需要大量的测试代码需要更新的可能很小，这意味着您的测试代码更易于维护（这只是我个人的看法，这完全取决于格式化逻辑或预期输入的复杂程度）

【讨论】：