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

Question

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

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

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

Answer 1

Dell 2021-02-21 10:33:52

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

• 提问者 鎏金华舞 #1

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

Answer 2

提问者 鎏金华舞 2021-02-22 19:11:12

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;

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