Как мне ждать React Hook in Jest? - PullRequest
Новая
       37

Как мне ждать React Hook in Jest?

0 голосов
/ 03 июля 2019

Я пытаюсь перевести небольшой пример с использования shouldComponentUpdate на использование ловушек React.Я также хочу написать несколько юнит-тестов в Jest, где я и борюсь.

Примечание : я видел некоторые существующие вопросы / ответы, и я не нет хочу использовать setTimeout для моего тестирования.

Код, который у меня есть на данный момент, выглядит следующим образом, во-первых, компонент: 

export default function HelloStarWars(props) {
    const data = useFetch(`https://swapi.co/api/people/${props.id}`);
    const { name } = data;

    return (
        <h1>Hello {name || "..."}!</h1>
    );
}

, где определено useFetchследующим образом: 

import { useState, useEffect } from "react";

export default function useFetch(url) {
    const [data, setData] = useState({});

    async function getData() {
        const response = await fetch(url);
        const data = await response.json();
        setData(data);
    }

    useEffect(() => {
        getData();
    }, []);

    return data;
}

Теперь, с чем я сталкиваюсь, я не могу понять, как преобразовать этот код, который я собрал.По сути, у меня больше нет функции componentDidMount() для await - так чего мне ждать, чтобы убедиться, что данные были получены? 

describe("ComponentDidMount", () => {

    beforeEach(() => {
        fetch.resetMocks();
    });

    it("Obtains result and sets data correctly", async () => {
        const wrapper = await mount(<HelloStarWars id="1" />);
        const instance = wrapper.instance();

        fetch.mockResponseOnce(JSON.stringify({ name: 'Jedi Master' }));
        await instance.componentDidMount();

        wrapper.update();

        expect(wrapper).toMatchSnapshot();
    });
});

Один из вариантов, который мне известен, это то, что я могу, шпионна useFetch и высмеивать возвращаемый результат.Я сделаю это, если придется, но в данный момент мне нравится библиотека jest-fetch-mock, которую я использую, и возможности, которые она предлагает.

...