宝玛科技网
您的当前位置:首页在项目中使用jest测试reactnative组件的方法

在项目中使用jest测试reactnative组件的方法

来源:宝玛科技网


同时,在test文件夹下会输出一个文件,即为生成的快照。


// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders correctly 1`] = `
<View
 style={
 Object {
 "backgroundColor": "#ddd",
 "height": 100,
 }
 }
>
 <Text
 accessible={true}
 allowFontScaling={true}
 disabled={false}
 ellipsizeMode="tail"
 style={
 Object {
 "fontSize": 30,
 }
 }
 >
 title
 </Text>
 <Text
 accessible={true}
 allowFontScaling={true}
 disabled={false}
 ellipsizeMode="tail"
 style={
 Object {
 "color": "red",
 "fontSize": 15,
 }
 }
 >
 text
 </Text>
</View>
`;

修改源文件

在下一次运行测试的时候,呈现的输出将与之前创建的快照进行比较。快照应该和代码一起提交。当快照测试失败的时候,就需要检查是否有意或无意的更改。如果是和预期中的变化一样,调用jest -u来覆盖当前的快照。

我们来更改一下原来的代码:把第二行<Text>的字号改为14.


<Text style={{ fontSize: 14, color }}>{text}</Text>

这时,我们再运行jest。这时终端将会抛出错误,并指出了错误位置

因为这段代码是我们有意改的,这时运行jest -u,快照被覆盖。再执行jest则不会报错了~

显示全文