react-native - 如何使用 jest/enzyme 测试功能组件中的条件块?
问题描述
我看到了一些与此相关的问题,但没有一个回答我的问题。谁能告诉如何测试这些文件。例如,我有以下功能组件(仅相关代码):
NewsFeed.js
const NewsFeed = (props) => {
const renderitem = ({item}: props) => {
if (item.id === '1') {
return (
<View>
<View style={styles.headertext}>
<Text>News Feed</Text>
</View>
<View style={styles.border} />
</View>
)
}
if (item.id === '2') {
return (
<View>
<View style={styles.header2}>
// playing with screen
</View>
<View style={styles.border} />
</View>
)
}
return (
<View />
)
}
return (
<View style={styles.container}>
<View style={styles.container1}>
<View>
<FlatList
ref={flatlist}
data={DATA}
renderItem={renderitem}
keyExtractor={(item) => item.id}
/>
</View>
</View>
</View>
)
}
现在我尝试为此实施测试,但我只能潜入渲染项,因此我的快照仅包含一个 View 标记。如何检查条件语句?
newsfeed.test.js
const DATA = [
{
id: '1',
title: 'header1'
},
{
id: '2',
title: 'header2'
},
{
id: '3',
title: 'feed'
}
]
describe('NewsFeed', () => {
let props
let wrapper
beforeEach(() => {
props = createTestProps({})
wrapper = shallow(<NewsFeed{...props} />)
})
it('NewsFeed component renders correctly', () => {
expect(wrapper).toMatchSnapshot()
})
// Higher Order Function Testing
it('render the flatlist properties', () => {
const flatlist = wrapper.find(FlatList);
const itemWrapper = flatlist.renderProp('renderItem')({ item: DATA });
expect(itemWrapper).toMatchSnapshot();
})
})
解决方案
推荐阅读
- puppeteer-sharp - 如何使用自定义下载文件夹和启动器可执行路径?
- php - 如何避免在 My-Sql 中重复列值
- unit-testing - TYPO3 单元测试中的模拟请求
- ruby-on-rails - Ruby on Rails Postgresql 数组 CSV 上传
- python-3.x - searborn 增加颜色数量
- javascript - 使用 _id 查找在 mongodb 中不起作用
- javascript - React Native 通过文本/字符串生成组件
- tensorflow - 无法使用 tensorflow 对象检测来检测自定义对象(尽管训练损失 < 1.0)
- cassandra - 如何在 Elassandra 中启用远程 JMX 连接?
- ios - 使用 NSFetchedResultsController 作为使用 Swift 的数据源的临时对象