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

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

0 голосов
/ 29 мая 2019

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

Я использую функциональный компонент с хуками (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");
  });
});

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

1 Ответ

0 голосов
/ 09 июня 2019

Проблема здесь в 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");
  });
});
...