V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
rodrick
V2EX  ›  JavaScript

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

  •  
  •   rodrick · 2022-08-12 18:38:04 +08:00 · 2036 次点击
    这是一个创建于 825 天前的主题,其中的信息可能已经有所发展或是发生改变。
    const Example = () => {
      const [c, sc] = useState(0);
    
      const inc = useCallback(() => sc(c => c + 1), [])
    
      return (
        <div>
          <button onClick={inc}>{c}</button>
        </div>
      );
    };
    

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

    11 条回复    2022-09-02 13:58:15 +08:00
    tatu
        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')
    rodrick
        3
    rodrick  
    OP
       2022-08-12 21:05:26 +08:00
    @tatu 是的 你说的这种是应该是争取的测试方式 主要业务里可能有嵌套调用 a->b->c 这种的 c 可能又有几种 case 写起来有点麻烦
    rodrick
        4
    rodrick  
    OP
       2022-08-12 21:07:04 +08:00
    @7anshuai 看 demo 是测试自定义 hook 函数组件没有返回方法 current 应该是拿不到方法的
    7anshuai
        5
    7anshuai  
       2022-08-12 21:42:42 +08:00
    @rodrick 把函数组件里需要测试的函数(react hooks),提取出来作为 custom hook 然后再写测试
    Rocketer
        6
    Rocketer  
       2022-08-12 22:25:43 +08:00 via iPhone   ❤️ 1
    @tatu 单元测试是最底层的测试,关注的就是细节,你说的这种关注结果的已经是高一层的测试了。

    一般来讲,纯函数应该测试给定的输入是否能得到预期的输出。有效果的方法(比如从服务器端取回数据)需要模拟不确定的部分(根据你的程序,拦截或注入某一环节,返回一个固定的值)以确保测试程序得到稳定的预期输出
    djs
        7
    djs  
       2022-08-13 00:52:20 +08:00 via iPhone
    收藏,一直等个最佳实践
    DvorakChen
        8
    DvorakChen  
       2022-08-13 12:44:00 +08:00   ❤️ 1
    如果你的组件是用于呈现视图,比如一个按钮,那么你的测试应该侧重于模拟用户行为,那么可以使用 cypress, testing-library/react 。
    如果你要测试组件的实现细节,该实现细节不会影响到界面,那么就应该使用单测,去测试你的细节函数,如 vtest, jest 。
    rodrick
        9
    rodrick  
    OP
       2022-08-14 10:41:22 +08:00
    @DvorakChen 第二种情况测试细节函数 例子里这种情况怎么测呢
    PainAndLove
        10
    PainAndLove  
       2022-09-02 13:27:11 +08:00
    蹲一个最佳实践...
    PainAndLove
        11
    PainAndLove  
       2022-09-02 13:58:15 +08:00
    @tatu 如果是我来写测试的话大概率也会这样写..
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1479 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 17:28 · PVG 01:28 · LAX 09:28 · JFK 12:28
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.