React测试库未在快照中显示Change道具的输入

Question

我用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道具。

Answer 1

onChange是React提供的事件处理程序，它没有显示在RTL渲染的实际DOM中。