`fireEvent.mouseEnter` 不转发 `relatedTarget` (相关目标是窗口)
QQ 版本数
- 测试-图书馆/反应版:`16.3.0'
- 测试框架和版本:`[email protected]'
- DOM环境:`[email protected]'
QQ 相关代码或配置 :
使用“入门”的测试组件:
{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你来干什么? // 测试 MouseEnter.tsx 从“ react” 导入{ type MouseEvent} ;
导出函数测试(){ Const handle Mouse Enter = (e: MouseEvent) {(鼠标事件){ 控制台.log( “ mouse Enter ” , e. connection) 目标);
- ;
返回( ưμ㼯A <>
使用 “入门”对假构件进行单元测试:
{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你来干什么? // 测试 MouseEnter. test.tsx 数据 从“viest”导入{描述、期望、它、vi}; 从“ @ testing-library/ react” 导入{ 渲染、屏幕、 fireEvent} ; 从“./测试”导入{测试};
描述('Test', () {{{} 它( 处理鼠标输入事件', () {{{} 控制台Spy = vi.spyOn(控制台, “log” );
渲染( < test / > );
const 元素 = 屏幕. getByText ("Hello") ; c. 模拟相关目标 = 文档. create Element ('div');
fireEvent.mouse Enter(元素,{ 相关目标:模拟 目标
- ;
期望 (ConsoleSpy) 。 not. have BeenCalled With ('mouse Enter',窗口) ; // FAILS: 比较值没有视觉差异 期望( consoleSpy) 。 要使用BeenCalled With( “mouse Enter ” , 模拟相关 目标); // FAILS: 第1个日志呼叫: ["mouse Enter", [Object]]
- ;
- ;
相同的假构件,但这次使用“ Mouse Over”:
{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你来干什么?
// 测试 Mouse Over.tsx
从“ react” 导入{ type MouseEvent} ;
导出函数测试(){
Const handle Mouse Over = (e: Mouse Event) {{(鼠标事件){
a. 控制台.log(“mouse Over”,即相关目标);
* ;
返回( ưμ㼯A
<>
<div> 在Mouse Over\ handle Mouse Over>上发布
哈罗
</div> (中文(简体) ).
< /> (简体中文)
(三)
{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢?使用“ MouseOver”对假构件进行单元测试:
{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你来干什么? // TestMouse Over. test.tsx (英语). 从“viest”导入{描述、期望、它、vi}; 从“ @ testing-library/ react” 导入{ 渲染、屏幕、 fireEvent} ; 从“./测试”导入{测试};
描述('Test', () {{{} 它( 将鼠标放在事件上 ), () {{{ 控制台Spy = vi.spyOn(控制台, “log” );
渲染( < test / > );
const 元素 = 屏幕. getByText ("Hello") ; c. 模拟相关目标 = 文档. create Element ('div');
fireEvent.mouse Over( 元素, { 相关目标:模拟 目标
- ;
期望( consoleSpy). not. have BeenCalled With('mouse Over',窗口) ; // 确定 期望 (ConsoleSpy) 。 拥有BeenCalledWith ('mouse Over', 模拟相关目标); // 确定
- ;
- ;
你做了什麽?
我使用`fireEvent.mouse Enter',希望将具体内容指定为`相关目标'。
发生了什么事?
在事件处理者中,`e.相干目标'是指`窗口'而不是指定的要素。
<img宽="861"高="502"高="相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相
. . . . . . .内容来源: testing-library/react-testing-library