Модульное тестирование ios .mockImplementation вызывает меня в неизменном состоянии?

Question

Я все еще пытаюсь научиться юнит-тестированию, и я использовал много руководств, но по какой-то причине в отношении тестирования топора ios я все испортил.

Примечание: у меня есть "jest.mock (" ax ios ");" уже установлено в верхней части моей тестовой страницы

getUserInfo = async () => {
  let authToken =
        "Bearer " + Cookies.get("auth-token").replace("__#__", ".");

    const instance = await axios.create({
        baseURL: "http://127.0.0.1:8000/",
        timeout: 8000,
        headers: {
            "Content-Type": "application/json",
            "X-Requested-With": "XMLHttpRequest",
            Authorization: authToken
        }
    });

    instance
        .get("api/userinfo")
        .then(json => {
            this.setState({
                user: json.data
            });
        })
        .catch(error => console.log(error));
};

componentDidMount() {
    this.getUserInfo();
}

, и мое тестирование:

  it("fetches data correctly", async () => {  

    const userJSON = {
        data: {
            name: "John Doe",
            email: "johndoe@mail.com",
            phone_number: "123-456-7890",
            profile_url: "url"
        }
    };


    axios.get.mockImplementationOnce(() => Promise.resolve({ userJSON }));

    const instance = await renderer.create(<ProfilePage />).getInstance();
    expect(instance.state.user).toEqual(userJSON)}

, и это результат теста, который не проходит:

Expected: {"data": {"email": "johndoe@mail.com", "name": "John Doe", "phone_number": "123-456-7890", "profile_url": "url"}}
Received: []

Answer 1

Проблема в основном из-за того, как вы написали метод getUserInfo. Хотя ваша идея написать его как метод async-await абсолютно верна, вы поместили оператор await в неправильное место.

axios.create возвращает экземпляр типа ax ios, который можно использовать для запуска XHR Запросы. Таким образом, он не требует ожидания. Вам нужно поместить ожидание с помощью вызова axios.get, так как это возвращает обещание. Из-за этого ваш визуализированный компонент не разрешил бы значение, когда вы утверждаете для обновления состояния.

Также заметил, что ваше утверждение неверно. Поскольку вы присваиваете значение json.data для state.users, ваше ожидание всегда будет неудачным.

Итак, следующее изменение должно помочь вам:

Исходный код:

getUserInfo = async () => {
    let authToken = 
        "Bearer " + Cookies.get("auth-token").replace("__#__", ".");

    const instance = axios.create({
        baseURL: "http://127.0.0.1:8000/",
        timeout: 8000,
        headers: {
            "Content-Type": "application/json",
            "X-Requested-With": "XMLHttpRequest",
            Authorization: authToken
        }
    });

    await instance
        .get("api/userinfo")
        .then(json => {
            this.setState({
                user: json.data
            });
        })
        .catch(error => console.log(error));
};

componentDidMount() {
    this.getUserInfo();
}

Тесты:

it("fetches data correctly", async () => {
    const userJSON = {
        name: "John Doe",
        email: "johndoe@mail.com",
        phone_number: "123-456-7890",
        profile_url: "url"
    };
    axios.get.mockResolvedValue({ data: userJSON });
    let instance = await renderer.create(<HomePage />).getInstance();
    expect(instance.state.user).toEqual(userJSON)
});