时间戳

首页 > 解决方案 > 模板单元测试：如何模拟初始状态并加载 newSpecPage？

jestjs - 模板单元测试：如何模拟初始状态并加载 newSpecPage？

问题描述

我是单元测试的新手，并计划编写单元测试用例，但不是为下面提到的场景编写 E-2-E，场景的游乐场链接在底部。

Scenario:-

我有一个@State名为的变量"ifSuccessResponse"，初始值设置为false.

当@State变量"ifSuccessResponse"为true时，green-div加载。

当@State变量"ifSuccessResponse"为false时，red-div加载。

  1. 如何模拟初始状态以将@State变量ifSuccessResponse设置为值true，然后加载 newSpecPage 以便我可以测试green-div已加载。
  1. 在 Moc Doc 中加载页面后，@State是否可以使用. 很想知道我们是否可以像在图书馆中使用.ifSuccessResponsenewSpecPageenzymesetState method

Playground-link： https ://webcomponents.dev/edit/Cbr1NS2QTrvC5s​​csmFZQ/src/index.stories.tsx

标签： jestjsstenciljsstencil-component

解决方案

与其尝试直接模拟状态（根据定义，它是组件内部的，否则您将/应该使用@Prop），您应该找到一种方法来进入练习设置该状态的逻辑。查看变量名，您的组件可能调用了一些底层 API 或服务？如果是这样，我强烈建议您模拟对该服务的请求/响应，然后以这种方式操纵状态。

我使用“fetch-mock”（https://www.npmjs.com/package/fetch-mock）来做到这一点。

当您使用 newSpecPage 时，您正在处理 DOM 元素，因此在该级别，您希望尽量减少暴露内部逻辑，以便您实际测试组件的使用方式。如果你有复杂的逻辑，你也可以很容易地编写单元测试来测试这样的功能。

推荐阅读