React-Testing-Library/Jest-Dom - 接收的值必须是 HTMLElement 或 SVGElement答案

【问题标题】：React-Testing-Library/Jest-Dom - Received value must be an HTMLElement or an SVGElementReact-Testing-Library/Jest-Dom - 接收的值必须是 HTMLElement 或 SVGElement
【发布时间】：2021-06-05 12:56:23
【问题描述】：

我是单元测试的新手，我正在尝试渲染一个组件以了解有关该库的更多信息。

我正在尝试遵循 this 指南。

组件

<TouchableOpacity
    style={style}
    onPress={onPress}
    accessibilityRole="button"
>
    <AppText style={textStyle}>{title.toUpperCase()}</AppText>
</TouchableOpacity>

测试

it("Has the correct title in the button", () => {
    const { getByText } = render(<AppButton title="Hello" />);
  
    expect(getByText("HELLO")).toBeInTheDocument();
});

我只是想查看组件是否正确呈现，但出现错误

received value must be an HTMLElement or an SVGElement.
    Received has type:  object
    Received has value: {"_fiber": {"_debugHookTypes": null, "_debugID": 40, "_debugIsCurrentlyTiming": false, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": null, "actualDuration": 0, "actualStartTime": -1, "alternate": null, "child": [FiberNode], "childExpirationTime": 0, "dependencies": null, "effectTag": 1, "elementType": [Function Component], "expirationTime": 0, "firstEffect": null, "index": 0, "key": null, "lastEffect": null, "memoizedProps": [Object], "memoizedState": null, "mode": 0, "nextEffect": null, "pendingProps": [Object], "ref": null, "return": [FiberNode], "selfBaseDuration": 0, "sibling": null, "stateNode": [Component], "tag": 1, "treeBaseDuration": 0, "type": [Function Component], "updateQueue": [Object]}}

对我做错了什么有什么建议吗？

【问题讨论】：

澄清一下，您在测试中使用的是react-testing-library 还是react-native-testing-library？
嘿，我正在使用 react-native-testing-library :)
我使用了 testID，它按预期工作:)

标签： react-native jestjs react-native-testing-library jest-dom

【解决方案1】：

问题是您正在尝试将 @testing-library/jest-dom 中的 toBeInTheDocument 辅助函数与 React Native 代码一起使用。 @testing-library/jest-dom 期望将 DOM 元素传递给它的函数，并打算与 @testing-library/react 一起使用 - 它不适用于 React Native 的原生元素。

当使用@testing-library/react-native 时，您可以像这样断言元素的存在。

it("has the correct title in the button", () => {
    const { getByText } = render(<AppButton title="Hello" />);
    expect(getByText("HELLO")).toBeTruthy();
});

【讨论】：

【解决方案2】：

您可以使用waitFor

示例：

import { waitFor } from "@testing-library/react-native";


waitFor(() => expect(getByText("Your-text")).toBeInTheDocument());

// or

waitFor(() => expect(getByTestId("Your-Test-Id")).toBeInTheDocument());

【讨论】：

【解决方案3】：

这是有效的解决方案，如果我通过 testID 访问它就可以工作。

it("Has the correct title in the button", () => {
        const { getByTestId } = render(<AppButton title="Hello" />);
        const eins = getByTestId("text");
        expect(eins.children[0]).toEqual("HELLO");
});

虽然很高兴理解为什么我无法通过getByText 获得价值，但至少它可以工作。 :)

【讨论】：

这不是一个解决方案，所以这里不应该被接受。