const Example = () => {
const [c, sc] = useState(0);
const inc = useCallback(() => sc(c => c + 1), [])
return (
<div>
<button onClick={inc}>{c}</button>
</div>
);
};
inc 怎么测试比较合适呢 不像类组件有 instance 如果是一个调用很深的函数 写单测有什么比较好的办法
1
7anshuai 2022-08-12 18:51:36 +08:00 3
|
2
tatu 2022-08-12 20:22:16 +08:00 3
推荐 testing-library/react ,不要关注组件内部的细节,站在真实用户的角度去写测试。
第一次 render ,看到一个 0 的 button ,点击后,0 变成 1 ,至于你用 setState 还是 useDispatch 去更新 state ,测试是不关心的。 以 Example 组件为例: test1: render(<Example />) expect(screen.getByRole('button')).toHaveTextContent('0') test2: render(<Example />) fireEvent.click(screen.getByRole('button')) expect(screen.getByRole('button')).toHaveTextContent('1') |
3
rodrick OP @tatu 是的 你说的这种是应该是争取的测试方式 主要业务里可能有嵌套调用 a->b->c 这种的 c 可能又有几种 case 写起来有点麻烦
|
6
Rocketer 2022-08-12 22:25:43 +08:00 via iPhone 1
@tatu 单元测试是最底层的测试,关注的就是细节,你说的这种关注结果的已经是高一层的测试了。
一般来讲,纯函数应该测试给定的输入是否能得到预期的输出。有效果的方法(比如从服务器端取回数据)需要模拟不确定的部分(根据你的程序,拦截或注入某一环节,返回一个固定的值)以确保测试程序得到稳定的预期输出 |
7
djs 2022-08-13 00:52:20 +08:00 via iPhone
收藏,一直等个最佳实践
|
8
DvorakChen 2022-08-13 12:44:00 +08:00 1
如果你的组件是用于呈现视图,比如一个按钮,那么你的测试应该侧重于模拟用户行为,那么可以使用 cypress, testing-library/react 。
如果你要测试组件的实现细节,该实现细节不会影响到界面,那么就应该使用单测,去测试你的细节函数,如 vtest, jest 。 |
9
rodrick OP @DvorakChen 第二种情况测试细节函数 例子里这种情况怎么测呢
|
10
PainAndLove 2022-09-02 13:27:11 +08:00
蹲一个最佳实践...
|
11
PainAndLove 2022-09-02 13:58:15 +08:00
@tatu 如果是我来写测试的话大概率也会这样写..
|