如何为功能组件的钩子中的代码获取 Jest 覆盖率？答案

【问题标题】：How to get Jest coverage for code in hooks, for functional component?如何为功能组件的钩子中的代码获取 Jest 覆盖率？
【发布时间】：2020-08-12 07:05:47
【问题描述】：

在功能组件中，有这个钩子/函数：

const [currentTab, setCurrentTab] = useState(index);
const handleTabChange = (event: React.ChangeEvent<{}>, tab: number) => {
    console.log("test handleTabChange: " + tab);
    setCurrentTab(tab);
  };

测试（控制台日志）正在调用该挂钩，但其中的代码缺少覆盖范围：“语句未覆盖”。我有一个测试来验证此选项卡更改的副作用 - 它工作正常。如何获得此“黑盒”代码的覆盖率？

非常感谢

【问题讨论】：

标签： reactjs jestjs react-hooks

【解决方案1】：

这是使用附加包enzyme的单元测试解决方案。

index.tsx:

import React, { useState } from 'react';

export default function MyComponent({ index }) {
  const [currentTab, setCurrentTab] = useState(index);
  const handleTabChange = (event: React.ChangeEvent<{}>, tab: number) => {
    console.log('test handleTabChange: ' + tab);
    setCurrentTab(tab);
  };
  return (
    <div>
      <select onChange={(e) => handleTabChange(e, 1)}>
        <option>chocolate</option>
        <option>strawberry</option>
        <option>vanilla</option>
      </select>
      <span>currentTab: {currentTab}</span>
    </div>
  );
}

index.test.tsx:

import MyComponent from './';
import React from 'react';
import { shallow } from 'enzyme';

describe('61480694', () => {
  it('should pass', () => {
    const logSpy = jest.spyOn(console, 'log');
    const mProps = { index: 2 };
    const wrapper = shallow(<MyComponent {...mProps}></MyComponent>);
    expect(wrapper.find('span').text()).toBe('currentTab: 2');
    wrapper.find('select').simulate('change');
    expect(wrapper.find('span').text()).toBe('currentTab: 1');
    expect(logSpy).toBeCalledWith('test handleTabChange: 1');
    logSpy.mockRestore();
  });
});

100% 覆盖率的单元测试结果：

 PASS  stackoverflow/61480694/index.test.tsx (11.97s)
  61480694
    ✓ should pass (28ms)

  console.log node_modules/jest-environment-enzyme/node_modules/jest-mock/build/index.js:866
    test handleTabChange: 1

-----------|---------|----------|---------|---------|-------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------|---------|----------|---------|---------|-------------------
All files  |     100 |      100 |     100 |     100 |                   
 index.tsx |     100 |      100 |     100 |     100 |                   
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        13.844s

【讨论】：

感谢您的回答。所以，通过监视 console.log 并检查副作用（跨度的新值），我会得到高覆盖率吗？如果console.log 不存在怎么办（我不确定我是否希望console.log 在最终生产代码中......）