前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【React总结(三)】React 组件自动化测试与持续集成指北(2)

【React总结(三)】React 组件自动化测试与持续集成指北(2)

原创
作者头像
志航
修改2019-04-02 11:23:42
1.8K0
修改2019-04-02 11:23:42
举报
文章被收录于专栏:前端探索

上文【React 组件自动化测试与持续集成指北(1)】 主要提到了一些 React 组件测试的基本方法论,接下来我们聊一下实际上是怎么实施组件的测试以及自动化的。

举个🌰看看实际组件中如何书写测试用例

Testing <Input />

1. 📷 Snapshot

首先先生成一个 snapshot

代码语言:txt
复制
    it('Input render correctly', () => {
        const wrapper = render(<Input />);
        expect(wrapper).toMatchSnapshot();
    });
2. 🗜 测试 props

通过 props 测试是一个很重要的测试过程,下吗我们设置 <Input /> 的 props 为 'test' ,测试组件是否表现正常,可以这样写。

代码语言:txt
复制
  it('Input pass props correctly', () => {
        // test props
        const props = {
            value: 'test',
            onChange: (value) => {},
        };

        const wrapper = mount(<Input {...props} />);

        expect(wrapper.props().value).toBe('test');
    });
3. 🕹 事件测试

测试事件可以通过点击,或者直接触发 onChange 等方式测试,下面举个🌰说明测试 onChange 事件 ,通过 simulate 方法触发组件onChange 方法, 看看是否正确 onChange 了 <Input /> 的值出来。

代码语言:txt
复制
  it('Input check the onChange callback', () => {
        const onChange = jest.fn();

        const props = {
            value: '123456',
            onChange,
        };

        const wrapper = mount(<Input {...props} />).find('input');
        wrapper.simulate('change', { target: { value: 888888 } });
        expect(onChange).toHaveBeenCalledWith(888888);
    });

上面的仓库都可以在我的 Github 上找到完整的代码 -> react-component-test-demo

🛠持续集成

靠人为自觉在发布前跑一下 npm test显然是不现实的,我们需要更为自动化的方式进行这个操作。下面我们将从两个方面简单介绍一下这方面的工具,另外,在上面提到的仓库上面,也有相关的实践,大家可以看一看。

  • CI 工具
  • commit-lint

🔌接入 CI 工具自动化测试

Github 上 很多著名的开源软件都在使用 travis CI,这是一款优秀的 CI 工具,我们可以通过他来做一些事情。例如

  • 在 push 或者 merge_request 的时候进行 npm run test 代码检查

在我的仓库中,我的配置是这样的,我增加了一个eslint 的检查,其实在实际项目中我们一般会阻止 master 的直接提交,取而代之的是,通过 merge_request 的方式进行代码合并,当 CI 工具接受到这个 github 的hook 的时候,就会自动拦截这个合并代码的请求,并且会根据你的 yml 配置文件进行相关的操作,例如各种 lint 检查,如果不符合相关规范,将会阻止代码的合并。 最终实现我们的通过工具来提升代码的质量。

代码语言:txt
复制
---
language: node_js
node_js:
  - '10'
  - node

cache:
  directories:
  - node_modules

jobs:
  include:
    - stage: lint
      script:
        - npm install
        - npm install eslint -g
        - npm run lint
    - stage: test
      script:
        - npm run test
        

📄通过 commit-lint 规范 commit message 自动生成 changelog

通过测试用例的方式提升了代码的质量后,其实通过我们还可以做更多的事情。

我们的组件库肯定是经常变更的,但是有时候新增了一些功能未必能够实时知会到每一个人,所以这里我们需要做一个 CHANGELOG (特性的变更记录)。

要实现这样的效果,首先我们的 commit messsage 要按照 Angular规范 来写。然后,通过 commit-lint 进行 commit 信息检查

可以查看上面仓库中的 package.jsoncommitlint 配置

代码语言:txt
复制
 "scripts": {
    "commitlint": "commitlint --color",
  },
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -e .git/COMMIT_EDITMSG",
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.js": [
      "eslint --fix",
      "git add"
    ]
  },

另外下面的文章也有相关的 commit 实践

总结

总的来说,我们需要通过测试用例来提高代码的之类,同时,通过 CI 工具,我们可以打造一个更加溜的工作流。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 举个🌰看看实际组件中如何书写测试用例
    • Testing <Input />
      • 1. 📷 Snapshot
      • 2. 🗜 测试 props
      • 3. 🕹 事件测试
  • 🛠持续集成
  • 🔌接入 CI 工具自动化测试
  • 📄通过 commit-lint 规范 commit message 自动生成 changelog
  • 总结
相关产品与服务
持续集成
CODING 持续集成(CODING Continuous Integration,CODING-CI)全面兼容 Jenkins 的持续集成服务,支持 Java、Python、NodeJS 等所有主流语言,并且支持 Docker 镜像的构建。图形化编排,高配集群多 Job 并行构建全面提速您的构建任务。支持主流的 Git 代码仓库,包括 CODING 代码托管、GitHub、GitLab 等。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档