玩笑测试 onClick 的 util 功能答案

【问题标题】：Jest test onClick for util function玩笑测试 onClick 的 util 功能
【发布时间】：2021-09-07 13:40:12
【问题描述】：

大家好，我在 MetaDetails.tsx 文件中尝试为 onClick 添加测试用例时遇到问题

utils.js

export const handlePrintLabelButtonClick = (
  e,
  rmaNumber,
  labelUrl,
  getReturnLabel
) => {
  const rmaList = [];

  e.preventDefault();
  if (!labelUrl) {
    // some logic
  } else {
    // some logic
  }
};

PrintLabel.tsx

import { DefaultButton } from "some path";
import { AnchorWrapper, ButtonWrapper } from "./index.styles";

export const PrintLabelButton = ({
  target,
  url,
  type,
  text,
  onClickHandle
}: PrintLabelButtonProps) => {
  return (
    <ButtonWrapper>
      <AnchorWrapper
        href={url}
        target={target}
        type={type}
      >
        <DefaultButton
          tabIndex="0"
          onClick={onClickHandle}
          data-test="print-label-button"
        >
          {text}
        </DefaultButton>
      </AnchorWrapper>
    </ButtonWrapper>
  );
};

MetaDetails.tsx

// Some lines of code 
import { PrintLabelButton } from "./printLabel";
import { handlePrintLabelButtonClick } from "utils";
export const OrderMetaDetails = () => {
  // some logic 
  return(
    //Some React code 

    {showPrintLabelButton && (
          <PrintLabelButton
            onClickHandle={e =>
              handlePrintLabelButtonClick(e, rmaNumber, labelUrl, getLabel)
            }
            url={labelUrl}
            target="_blank"
            type="printLabel"
            text={intl.formatMessage(messages.printLabelText)}
            
          />
        )}

      // Some React code 
  )
}

我尝试过的

MetaDetails.test.tsx

 test("Order Meta Details Print Label Click", () => {
    const handlePrintLabelButtonClick = jest.fn();
    const wrapper = mountWithIntl(
      <OrderMetaDetails
        getLabel={() => {}}
        info={/*some data*/}
        intl={/*intl*/ }
      />
    );
    const component = wrapper.find(`[data-test="print-label-button"]`).hostNodes();
    component.simulate("click")
    expect(handlePrintLabelButtonClick).toHaveBeenCalled();
  });

Jest 抛出以下错误

Error: expect(jest.fn()).toHaveBeenCalled()

Expected number of calls: >= 1
Received number of calls:    0

运行测试覆盖时，在函数覆盖中，我看到 MetaDetails.tsx 中的“handlePrintLabelButtonClick”显示为未覆盖。我也尝试过其他方法，但都没有奏效。我是单元测试的新手。有人可以指导什么是正确的方法。

注 1： 我正在使用 react/@emotion
注 2： 我已经评论或写过诸如“一些逻辑”之类的文字，因为有很多不需要的线条。

【问题讨论】：

标签： javascript reactjs redux react-redux jestjs

【解决方案1】：

您的源代码仍然使用原始的handlePrintLabelButtonClick 函数，而不是您在测试中创建的模拟函数。

您需要模拟实际导出的函数，例如使用jest.mock：

import { handlePrintLabelButtonClick } from './utils.js';

const mockHandlePrintLabelButtonClick = jest.fn();
// Mock the module.
jest.mock('./utils.js', () => {
  handlePrintLabelButtonClick: mockHandlePrintLabelButtonClick 
}

describe('something', () => {
  test("Order Meta Details Print Label Click", () => {
    const wrapper = mountWithIntl(
      <OrderMetaDetails
        getLabel={() => {}}
        info={/*some data*/}
        intl={/*intl*/ }
      />
    );
    const component = wrapper.find(`[data-test="print-label-button"]`).hostNodes();
    component.simulate("click")
    expect(mockHandlePrintLabelButtonClick).toHaveBeenCalled();
  });
})

【讨论】：