javascript - React 测试库未在快照中显示输入 onChange 道具
问题描述
我有一个简单的 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 道具。
解决方案
onChange
在您的 JSX 中是 React 提供的事件处理程序,它没有显示在 RTL 呈现的实际 DOM 中。
推荐阅读
- java - 如何每次单击按钮时添加新的 Textview
- javascript - AudioWorklet 是否为在 PC 和 Android 上播放声音 Chrome 提供最低延迟?
- .htaccess - 将带有语言变量的 url 重定向到不同的 url htaccess
- javascript - 将数字存储在javascript变量中,然后在脚本运行时添加到它?
- continuous-integration - 使用语义发布推送到存储库并使用 GitHub Actions 在其他作业中签出
- authentication - 如何在 Postman 中设置 X-Auth-Token?
- c++ - HTMLHelp 函数在 64 位应用程序上崩溃
- python - 如何修复加载第一个图像时引发的 pyglet 错误?
- ruby - 带有硒的水豚在对黄瓜使用“访问”方法时间歇性地抛出 Net::ReadTimeout 错误
- regex - 从正则表达式正面查找匹配中提取最后 3 个字符