我是测试新手,对于我需要做什么来彻底测试我的MealsSummary.tsx
组件感到非常困惑。我想从测试我的组件是否正确地从redux store
中检索items
开始。我从SO那里找到了一些答案来设置我的mock函数,尽管我不确定设置是否正确。如果正确,在测试我的“useSelector”模拟函数方面,我下一步应该做什么。MealsSummary.test.tsx
describe('mock ', () => {
jest.mock("react-redux", () =>({
...jest.requireActual("react-redux"),
useSelector: jest.fn()
}))
describe("testing useselector", () => {
const mockedState = {
user: {
image: 'null',
name: 'testing',
id: 'name+date',
calories: 2000,
proteins: 150,
carbohydrates: 200,
fats: 90,
},
};
test('get items', () =>{
//not sure what to write
})
});
})
MealsSummary.tsx
import { useSelector } from "react-redux"
import { RootState } from "../../redux/store";
import { ScrollView, StyleSheet, Text} from "react-native"
import { MealCard } from './MealCard'
export const MealsSummary = (): JSX.Element => {
const { items } = useSelector((store: RootState) => store.nutrition)
let title: string = 'Food'
return (<>
<Text style={styles.title}>{title}</Text>
<ScrollView >
{items.map(item => (
<MealCard item={item} key={item.id}/>
))}
</ScrollView>
</>)
}
1条答案
按热度按时间1szpjjfi1#
不要模拟
react-redux
包的useSelector
,这样会破坏它的功能。相反,我们应该使用redux
的createStore
API创建一个存储,并将该存储传递给Provider
组件。我们可以在创建redux存储时创建模拟状态。例如:
检测结果:
更多测试用例,请参见useSelector.spec.tsx文件