react 函数组件的单元测试有办法单独测组件内的函数么

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 832 天前的主题，其中的信息可能已经有所发展或是发生改变。

const Example = () => {
  const [c, sc] = useState(0);

  const inc = useCallback(() => sc(c => c + 1), [])

  return (
    <div>
      <button onClick={inc}>{c}</button>
    </div>
  );
};

inc 怎么测试比较合适呢不像类组件有 instance 如果是一个调用很深的函数写单测有什么比较好的办法

const

Inc

函数

div

11 条回复 • 2022-09-02 13:58:15 +08:00

7anshuai

2022-08-12 18:51:36 +08:00

https://github.com/testing-library/react-hooks-testing-library#usecounterjs

tatu

2022-08-12 20:22:16 +08:00

推荐 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')

rodrick

2022-08-12 21:05:26 +08:00

@tatu 是的你说的这种是应该是争取的测试方式主要业务里可能有嵌套调用 a->b->c 这种的 c 可能又有几种 case 写起来有点麻烦

rodrick

2022-08-12 21:07:04 +08:00

@7anshuai 看 demo 是测试自定义 hook 函数组件没有返回方法 current 应该是拿不到方法的

7anshuai

2022-08-12 21:42:42 +08:00

@rodrick 把函数组件里需要测试的函数(react hooks)，提取出来作为 custom hook 然后再写测试

Rocketer

2022-08-12 22:25:43 +08:00 via iPhone

@tatu 单元测试是最底层的测试，关注的就是细节，你说的这种关注结果的已经是高一层的测试了。

一般来讲，纯函数应该测试给定的输入是否能得到预期的输出。有效果的方法（比如从服务器端取回数据）需要模拟不确定的部分（根据你的程序，拦截或注入某一环节，返回一个固定的值）以确保测试程序得到稳定的预期输出

djs

2022-08-13 00:52:20 +08:00 via iPhone

收藏，一直等个最佳实践

DvorakChen

2022-08-13 12:44:00 +08:00

如果你的组件是用于呈现视图，比如一个按钮，那么你的测试应该侧重于模拟用户行为，那么可以使用 cypress, testing-library/react 。
如果你要测试组件的实现细节，该实现细节不会影响到界面，那么就应该使用单测，去测试你的细节函数，如 vtest, jest 。

rodrick

2022-08-14 10:41:22 +08:00

@DvorakChen 第二种情况测试细节函数例子里这种情况怎么测呢

PainAndLove

2022-09-02 13:27:11 +08:00

蹲一个最佳实践...

PainAndLove

2022-09-02 13:58:15 +08:00

@tatu 如果是我来写测试的话大概率也会这样写..

react 函数组件的单元测试 有办法单独测组件内的函数么

react 函数组件的单元测试有办法单独测组件内的函数么