Состояние не обновляется во время тестов Jest при использовании React Native и Hooks

Я пытаюсь проверить функциональность своего компонента, основная идея заключается в том, что какое-то состояние установлено, и при нажатии кнопки вызывается функция с установленным состоянием. Код работает, но когда я пытаюсь проверить это, я не получаю ожидаемого результата, как будто состояние никогда не устанавливается во время теста.

Я использую функциональный компонент с хуками (useState) в приложении React Native, протестированном с помощью Jest и Enzyme.

Пример, который повторяет мою проблему:

import React, { useState } from "react";
import { View, Button } from "react-native";
import { shallow } from "enzyme";

const Example = function({ button2Press }) {
const [name, setName] = useState("");

  return (
    <View>
      <Button title = "Button 1" onPress = {() => setName("Hello")} />
      <Button title = "Button 2" onPress = {() => button2Press(name)} />
    </View>
  );
};

describe("Example", () => {
  it("updates the state", () => {
    const button2Press = jest.fn();
    const wrapper = shallow(<Example button2Press = {button2Press} />)
    const button1 = wrapper.findWhere(node => node.prop("title") === "Button 1")
                        .first();
    const button2 = wrapper.findWhere(node => node.prop("title") === "Button 2")
                        .first();

    button1.props().onPress();
    button2.props().onPress();

    expect(button2Press).toHaveBeenCalledWith("Hello");
  });
});

Любая помощь в том, что я делаю неправильно/отсутствует, была бы отличной.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
5 704
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема здесь в 2 вещах. Сначала мне нужно вызвать wrapper.update(); после выполнения действий, которые приведут к обновлению состояния. Во-вторых, мне нужно снова найти элемент после выполнения wrapper.update();, чтобы этот элемент имел обновленное состояние.

Рабочее решение:

import React, { useState } from "react";
import { View, Button } from "react-native";
import { shallow } from "enzyme";

const Example = function({ button2Press }) {
const [name, setName] = useState("");

  return (
    <View>
      <Button title = "Button 1" onPress = {() => setName("Hello")} />
      <Button title = "Button 2" onPress = {() => button2Press(name)} />
    </View>
  );
};

describe("Example", () => {
  it("updates the state", () => {
    const button2Press = jest.fn();
    const wrapper = shallow(<Example button2Press = {button2Press} />)
    const button1 = wrapper.findWhere(node => node.prop("title") === "Button 1")
                        .first();
    button1.props().onPress();
    wrapper.update(); // <-- Make sure to update after changing the state

    const button2 = wrapper.findWhere(node => node.prop("title") === "Button 2")
                        .first(); // <-- Find the next element again after performing update
    button2.props().onPress();

    expect(button2Press).toHaveBeenCalledWith("Hello");
  });
});

Этот ответ было трудно найти нелепо!

kraxor 02.05.2021 00:24

Вау спасибо!! Я застрял на этом навсегда! В моей ситуации мне не нужно было вызывать wrapper.update(), но мне нужно было снова найти элемент.

MattR 31.07.2021 00:42

Другие вопросы по теме