美文网首页
给组件库编写测试代码(Button)(2)- React Tes

给组件库编写测试代码(Button)(2)- React Tes

作者: 再见地平线_e930 | 来源:发表于2020-07-26 18:06 被阅读0次

    光有通用的测试工具 Jest 还不够,我们还需要另一个工具,它可以把 React 的组件渲染到测试用例上

    React官方推荐的是  React Testing Library

    他也在新版本的 create-react-app 中被添加了进去


    先简单测试一下之前写的 Button 组件,使用 npm run test 命令进行测试

    结果:

    如果把QAQ改为qqq:

    代码和结果

    Jest-dom

    Jest 添加了一些新的 matchers,主要是针对 DOM 的断言(新版自带这个库)

    使用 describe 关键字对测试用例经行分类

    1.测试 default Button:

    结果:

    如何测试 Button 组件的 onClick 事件呢?

    Jest 给我们提供了 Mock Functions

    通过 Jest.fn() 创建一个被监控的模拟函数, 然后把他放到组件中去

    引入 fireEvent 来模拟触发事件

    结果

    2.测试其他类型 Button

    3.测试 a 标签 Button


    4.测试 disabled Button

    相关文章

      网友评论

          本文标题:给组件库编写测试代码(Button)(2)- React Tes

          本文链接:https://www.haomeiwen.com/subject/lyqglktx.html