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

志航 • 2023-01-03 • 云技术社区 • 277 阅读

上文【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.json和 commitlint 配置

 "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 实践