什么是 unexpected-preact？
unexpected-preact 是一个为 Preact 框架设计的测试库。它是 Preact 版本的 unexpected 包，而 unexpected 则是一个非常流行的 JavaScript 测试库。
与其他测试库不同，unexpected 提供了描述性断言，使测试代码更容易编写和维护。unexpected-preact 继承了 unexpected 的特点，同时增加了对 Preact 框架的支持。它提供了许多预定义的 UI 断言，用于测试 Preact 组件。
如何安装 unexpected-preact？
使用 npm 命令进行安装：
npm install unexpected-preact --save-dev
在项目中导入 unexpected 和 unexpected-preact：
import unexpected from 'unexpected'; import unexpectedPreact from 'unexpected-preact';
unexpected-preact 断言
容器元素
- to have rendered: 该断言用于检查 Preact 组件是否成功渲染，可以使用组件名称或元素选择器。
import { h } from 'preact';
const MyComponent = () => <div>Hello, World!</div>;
const componentInstance = render(<MyComponent />);
expect(componentInstance, 'to have rendered', <MyComponent />);
expect(componentInstance, 'to have rendered', '.my-component');- to contain：该断言用于检查容器是否包含特定的子元素。可以使用元素选择器、组件名称或元素。
-- -------------------- ---- -------
------ - - - ---- ---------
----- ----------- - -- -- -
-----
--------- ----------
------------- ------------
------
--
----- ----------------- - ------------------- ----
------------------------- --- --------- --------- ------------
------------------------- --- --------- ----------
------------------------- --- --------- -----------------属性断言
- to have attribute: 该断言用于检查元素的属性是否已设置。
import { h } from 'preact';
const MyComponent = () => (
<div data-some-attr="attr-value">Hello, World!</div>
);
const componentInstance = render(<MyComponent />);
expect(componentInstance, 'to have attribute', 'data-some-attr', 'attr-value');- to have prop: 该断言用于检查 Preact 组件的属性。
import { h } from 'preact';
const MyComponent = ({ name }) => <div>Hello, {name}!</div>;
const componentInstance = render(<MyComponent name="John" />);
expect(componentInstance, 'to have prop', 'name', 'John');- to have style: 该断言用于检查元素样式。
-- -------------------- ---- ------- ------ - - - ---- --------- ----- ----------- - -- -- - ---- -------- ------ ------ ---------------- ------- -------- ------------ -- ----- ----------------- - ------------------- ---- ------------------------- --- ---- ------- - ------ ------ ---------------- -------- ---
事件处理程序
- to have event handler: 该断言用于检查事件处理程序是否已绑定。
import { h } from 'preact';
const MyComponent = ({ onClick }) => (
<button onClick={onClick}>Click Me!</button>
);
const onClick = sinon.spy();
const componentInstance = render(<MyComponent onClick={onClick} />);
expect(componentInstance, 'to have event handler', 'click', onClick);类断言
- to have class name: 该断言用于检查是否存在某个类。
import { h } from 'preact';
const MyComponent = () => <div class="my-component">Hello World!</div>;
const componentInstance = render(<MyComponent />);
expect(componentInstance, 'to have class name', 'my-component');使用示例
下面是一个使用 unexpected-preact 进行测试的示例。该示例测试了一个简单的计数器组件。
-- -------------------- ---- -------
------ - - - ---- ---------
------ ---------- ---- -------------
------ ---------------- ---- --------------------
----- ------- - ---------------- -- -
----- ------- --------- - -----------------------
----- --------- - -- -- -
-------------- - ---
--
------ -
-----
--------- -----------
------- -------------------------------
------
--
--
----- ------ - -----------------------------------------
------------------- -- -- -
---------- ------ ---- ------- ------- -- -- -
----- ----------------- - --------------- ---------------- ----
------------------------- --- ---- ---------- -------- ----
------------------------- --- ---- ---------- -----
---
---------- --------- ----- ---- ------ -- --------- -- -- -
----- ----------------- - --------------- ---------------- ----
----- ------ - ------------------------------------------
------------------------- --- ---- ---------- -----
------------------------ ------------------- - -------- ---- ----
------------------------- --- ---- ---------- -----
---
---结论
unexpected-preact 是一个非常有用的测试库，可以用于测试 Preact 组件。它提供了易于理解的语言和预定义的 UI 断言，使测试变得更容易和直观。如果您是使用 Preact 框架的前端开发人员，则使用 unexpected-preact 进行测试可能是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671cc30d0927023822854