React 测试库未在快照中显示输入 onChange 道具
Posted
技术标签:
【中文标题】React 测试库未在快照中显示输入 onChange 道具【英文标题】:React testing library not displaying input onChange prop in snapshot 【发布时间】:2020-12-18 19:38:45 【问题描述】:我有一个使用 RTL 和 Jest 的简单快照测试,我在 type
和 placeholder
旁边使用的任何其他道具我在生成的快照中看不到它。这是我的输入组件:(我正在使用样式化组件)
const TextField = ( className, placeholder, onChange, type ) =>
return (
<Styled>
<Styled.input
type=type
placeholder=placeholder
className=className
onChange=onChange
/>
</Styled>
);
;
这是我的测试:
it('shall render correctly', () =>
const asFragment = render(
<ThemeProvider theme=theme>
<TextField placeholder="Ramdom text" type="search" onChange=jest.fn() />
</ThemeProvider>,
);
expect(asFragment()).toMatchSnapshot();
);
生成的快照:
exports[`TextField component shall render correctly 1`] = `
<DocumentFragment>
.c0
position: relative;
.c1
width: 100%;
outline: none;
border: solid 0px;
border-radius: 10em;
background: #f4f5f8;
padding: 8px 8px 8px NaNpx;
font: 400 1.6rem/normal 'Open Sans','Helvetica','Arial',sans-serif;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-transform: none;
<label
class="c0"
>
<input
class="c1"
placeholder="Ramdom text"
type="search"
/>
</label>
</DocumentFragment>
`;
如您所见,输入道具中没有 onChange 道具。
【问题讨论】:
【参考方案1】:您的 JSX 中的onChange
是 React 提供的事件处理程序,它没有显示在 RTL 呈现的实际 DOM 中。
【讨论】:
不仅 onChange 甚至一个 prop "blabla" 都不会显示,除了官方 HTLM 输入属性之外的任何东西都不会显示以上是关于React 测试库未在快照中显示输入 onChange 道具的主要内容,如果未能解决你的问题,请参考以下文章
Android Tensorflow Lite C++ .SO 库未在运行时链接
[xamarin][uwp][custom renderer] 自定义渲染器 pcl 库未在发布模式下加载
快照测试的工作原理以及 toMatchSnapshot() 函数在 React 组件的 Jest 快照测试中的作用是啥?