React / Jest 测试历史记录。正确推送以实现 100% 的代码覆盖率答案

【问题标题】：React / Jest testing history.push correctly for 100% code coverageReact / Jest 测试历史记录。正确推送以实现 100% 的代码覆盖率
【发布时间】：2022-02-04 03:14:22
【问题描述】：

我的应用中有一个功能如下：

import React from 'react';
import { useHistory } from "react-router-dom";

const Main: React.FunctionComponent<{ data: any[] }> = ({
    data: result }) => {

    const history = useHistory();

    return (
        <>  
            {result?.map(inner => {

                const handleClick = () => {
                    history.push(`/list/${result?.id}`, { item: result?.item})
                }

                return (
                    <div key={result.id} onClick={handleClick}>
                        <div className="inner-content">{result?.content}</div>
                    </div>
                )
            })}
        </>
    )
}

export default Main;

我的测试中有一个测试用例如下：

const mockHandleClick = jest.fn();

jest.mock('react-router-dom', () => ({
    ...jest.requireActual('react-router-dom'),
    useHistory: () => ({
        push: mockHandleClick,
    }),
}));

it('Should test history push', () => {
    let tree = create(<div onClick={mockHandleClick}><div class="inner- 
    content">Content Here</div></div>);
    const button = tree.root.findByType('div')
    button.props.onClick()
    expect(mockHandleClick).toHaveBeenCalledTimes(1);
});

这通过了，但handleClick 函数仍然在代码覆盖率中标记？所以我没有达到 100% 的覆盖率。

有什么想法吗？

【问题讨论】：

您能否更新您的问题以包含所有相关代码？我们能看到被测组件和测试所针对的div 吗？ stackoverflow.com/help/minimal-reproducible-example
用组件更新
哇...尝试将 handleClick 回调移动到主组件主体中，这样每个映射的 result 元素只有一个回调，将 id 和 item 传递给它。看看这是否能提高您的覆盖率。

标签： javascript reactjs jestjs react-router react-testing-library

【解决方案1】：

我认为您无法达到更完整的代码覆盖率，因为您为每个迭代的 result 元素对象声明了一个 handleClick 回调。测试似乎只选择了第一个div。

将handleClick 处理程序重构到组件主体中，并将单个处理程序传递给每个映射项，并将映射对象传递给处理程序。

const Main: React.FunctionComponent<{ data: any[] }> = ({
  data: result }) => {

  const history = useHistory();

  const handleClick = (inner) => () => {
    history.push(`/list/${inner?.id}`, { item: inner?.item });
  };

  return (
    <>
      {result?.map(inner => (
        <div key={inner.id} onClick={handleClick(inner)}>
          <div className="inner-content">{inner?.content}</div>
        </div>
      ))}
    </>
  );
};

【讨论】：