React Native组件Jest测试：无法定位FontAwesomeIcon元素

问题分析 #

你的测试用例里，FieldErrorMessage组件的文本元素能通过testID正常定位，但图标元素不行，问题出在FontAwesomeIcon的Mock实现上。虽然你把props传递给了MockView，但在Jest测试环境中，这种Mock方式可能导致testID没有被@testing-library/react-native正确识别。

修复方案 #

方案1：修改Mock实现，确保props正确传递 #

把测试文件中的Mock代码替换为以下内容，直接返回一个接收所有props的View组件：

import React from "react";
import { render } from "@testing-library/react-native";
import { View } from "react-native";
import FieldErrorMessage from "../FieldErrorMessage";

jest.mock("@fortawesome/react-native-fontawesome", () => ({
  FontAwesomeIcon: (props) => <View {...props} />,
}));

describe("FieldErrorMessage", () => {
  test("renders nothing if message is null or undefined", () => {
    const { queryByTestId } = render(<FieldErrorMessage />);
    expect(queryByTestId("field-error-message")).toBeNull();
    expect(queryByTestId("field-error-icon")).toBeNull();
  });

  test("renders the icon and message correctly when the message is updated", () => {
    const message = "This is an error message";
    const { queryByTestId } = render(<FieldErrorMessage message={message} />);
    expect(queryByTestId("field-error-message")).toBeTruthy();
    expect(queryByTestId("field-error-icon")).toBeTruthy();
  });
});

方案2：保留Mock调用跟踪，同时验证props传递 #

如果你需要验证FontAwesomeIcon的调用情况，可以保留jest.fn，同时确保props正确传递：

import React from "react";
import { render } from "@testing-library/react-native";
import { View } from "react-native";
import FieldErrorMessage from "../FieldErrorMessage";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { faCircleInfo } from "@fortawesome/pro-solid-svg-icons";

jest.mock("@fortawesome/react-native-fontawesome", () => ({
  FontAwesomeIcon: jest.fn((props) => <View {...props} />),
}));

describe("FieldErrorMessage", () => {
  test("renders nothing if message is null or undefined", () => {
    const { queryByTestId } = render(<FieldErrorMessage />);
    expect(queryByTestId("field-error-message")).toBeNull();
    expect(queryByTestId("field-error-icon")).toBeNull();
  });

  test("renders the icon and message correctly when the message is updated", () => {
    const message = "This is an error message";
    const { queryByTestId } = render(<FieldErrorMessage message={message} />);
    
    expect(queryByTestId("field-error-message")).toBeTruthy();
    expect(queryByTestId("field-error-icon")).toBeTruthy();
    
    // 额外验证FontAwesomeIcon是否接收了正确的props
    expect(FontAwesomeIcon).toHaveBeenCalledWith(
      expect.objectContaining({
        testID: "field-error-icon",
        icon: faCircleInfo,
        size: 14,
      }),
      expect.anything()
    );
  });
});

原Mock失效原因 #

你之前使用MockView传递props的方式看似正确，但Jest对React Native组件的Mock可能干扰testID的识别逻辑。直接使用原生View组件并显式传递props，能确保@testing-library/react-native正常识别testID属性。

内容的提问来源于stack exchange，提问作者Mayank