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

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

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

Testing <Input />

1. 📷 Snapshot

首先先生成一个 snapshot

    it('Input render correctly', () => {
        const wrapper = render(<Input />);
        expect(wrapper).toMatchSnapshot();
    });

2. 🗜 测试 props

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

  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 /> 的值出来。

  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 检查,如果不符合相关规范,将会阻止代码的合并。 最终实现我们的通过工具来提升代码的质量。

---
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 配置

 "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 工具,我们可以打造一个更加溜的工作流。

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

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

编辑于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区