react 无状态组件如何测试呢？

来源：6-2 使用 BDD 和集成测试进行 Vuex 项目的测试（1）

鎏金华舞

2021-02-20

比如说
import React, { useState } from ‘react’;

const [bindPhone, setBindPhone] = useState(’’);

对于bindPhone的数值测试该如何处理？

写回答

2回答

Dell

2021-02-21

参考这篇文章提供的两个思路：https://www.cnblogs.com/moluy/p/14120177.html

鎏金华舞

老师，我上了我的代码。代码中，我想要测试redux中的数据，这种useSelector如何测试？ 1、bannerList.length 大于0 ，渲染element 2、bannerList.length 小于0，不渲染 3、SwiperItem的点击事件，没有头绪去操作

2021-02-22

共1条回复

鎏金华舞

提问者

2021-02-22

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import Taro from '@tarojs/taro';

const BannerPage = () => {
const dispatch = useDispatch();
const { bannerList } = useSelector((state: any) => state.useTickets);

// 如果没有注册会员跳转登录页面
const handelRecharge = (item: bannerItemType) => {
const { fromPath } = item;
const { bindPhone } = Taro.getStorageSync('person_info');
let goUrl = bindPhone ? '/page/rechargePoints/index' : '/page/registerPack/authorizedToLogin/index';
if (fromPath) {
Taro.reportAnalytics('go_anti_', { fromPath });
dispatch(updateFromPath(fromPath));
goUrl = '/page/activityPack/epidemic/index';
}
Taro.navigateTo({
url: goUrl
});
};

return bannerList.length > 0 ? (
<Swiper
className="home-banner page-bg"
autoplay
circular
indicatorDots={bannerList.length > 1}
indicatorActiveColor="#fff"
indicatorColor="#ECF0EF"
>
{bannerList.map((item: bannerItemType, index: number) => (
<SwiperItem
className="banner-item"
onClick={() => {
handelRecharge(item);
}}
key={index}
>
<Image src={`${envConfig.cdnURL}${item.path}`} className="banner-item" />
</SwiperItem>
))}
</Swiper>
) : null;
};
export default BannerPage;

谢谢老师的回答。老师一回答我就开始看资料，观看很多网站，但没能做出来。。

前端要学的测试课从Jest入门到 TDD/BDD双实战

以 Vue / React 项目进行自动化测试实战，让你技术水平和架构思维双提升

1408 学习 · 348 问题

查看课程

相似问题

组件里有slot的情况，该如何写测试呢

回答 1

请问老师，useState的值如何mock？

回答 1

关于测试在react中的异步axios

回答 2

关于axios测试的问题

回答 1

使用组件中的module里jest测试总是发现不了state

回答 2

打开慕课网App查看更多内容