@fluixi/测试
用于测试 Fluixi 组件的最小帮助器. 它使一个组成部分成为
jsdom 容器,给你一个处理器和查询短手,再出口
flush 这样你就可以等待效果。 对于超过基础的询问和匹配者,
访问范围 @testing-library/dom数字 :
它和DOM有矛盾 所以它用盒子里的东西来编曲.
阿尔法。 这里的地表是故意小的, 更丰富的公用设施将会从 实际使用.
安装
npm i -D @fluixi/testing vitest jsdom
在jsdom的点:
// vitest.config.ts
import { defineConfig } from 'vitest/config';
export default defineConfig({
test: { environment: 'jsdom', globals: true },
});
使用
import { render, flush, fireEvent } from '@fluixi/testing';
import { Counter } from './Counter';
it('increments on click', async () => {
const { find, unmount } = render(() => <Counter start={2} />);
expect(find('output')!.textContent).toBe('2');
fireEvent(find('button')!, 'click');
await flush(); // let effects settle
expect(find('output')!.textContent).toBe('3');
unmount();
});
API 密码
render(code, options?) → RenderResult
挂载 code (一个返回组件/元素的th)放入容器.
默认它会产生一个 <div> 并附加到 document.body; 通过
options.container 在别的地方上山.
RenderResult数字 :
container: 元素变成.unmount():处理活性根并拆卸容器.find(selector)数字 :container.querySelector。 。 。 .findAll(selector)数字 :container.querySelectorAll,作为数组.html(): 容器的电流innerHTML。 。 。 .
flush() → Promise<void>
绒毛等待反应 另导出为 flushEffects。 。 。 .
fireEvent(node, type, init?) → boolean
可以取消的事件 讨论事项:Fluixi代表
on* 处理者,所以一个非bubbling事件不会到达他们。 对于任何富有,
使用情况 node.dispatchEvent(...) 直接或 @testing-library/dom是因为 fireEvent。 。 。 .
安全部门改革的说法
renderToString 用于声明服务器输出的再导出 :
import { renderToString } from '@fluixi/testing';
expect(renderToString(() => <Hello name="world" />)).toContain('world');
与 @ testing-library/ dom 连接
import { render } from '@fluixi/testing';
import { getByRole } from '@testing-library/dom';
const { container } = render(() => <LoginForm />);
getByRole(container, 'button', { name: /sign in/i }).click();