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

[rodrick]

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

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

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

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

[7anshuai]

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

[tatu]

推荐 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]

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

[rodrick]

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

[7anshuai]

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

[Rocketer]

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

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

[djs]

收藏，一直等个最佳实践

[DvorakChen]

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

[rodrick]

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

[PainAndLove]

蹲一个最佳实践...

[PainAndLove]

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