React-Testing-Library/Jest-Dom - полученное значение должно быть HTMLElement или SVGElement

Я новичок в модульном тестировании и пытаюсь визуализировать компонент, чтобы узнать больше о библиотеке.

Изменить: я пытаюсь следовать этому руководству.

Компонент

      <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]}}

Спасибо, что изучили это! Какие-нибудь советы о том, что я делаю не так?

Источник

3 ответа

Решение

Вы можете использовать waitFor

Образец:

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


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

// or

waitFor(() => expect(getByTestId("Your-Test-Id")).toBeInTheDocument());
Источник

Проблема в том, что вы пытаетесь использовать 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();
});
Источник

Вот рабочее решение, оно работает, если я обращаюсь по 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, по крайней мере, это работает. :)

Источник
Другие вопросы по тегам