使用 React Native 和 Hooks 时，在 Jest 测试期间状态不会更新

Question

我正在尝试测试我的组件中的功能，基本思想是设置了一些状态，当按下按钮时，将调用具有设置状态的函数。代码有效，但是当我尝试对此进行测试时，我没有得到预期的结果，就好像在测试期间从未设置状态一样。

我在使用 Jest 和 Enzyme 测试的 React Native 应用程序中使用带有钩子 (useState) 的功能组件。

复制我的问题的一个例子是：

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");
  });
});

任何对我正在做的事情的帮助 wrong/missing 都会很棒。

Answer 1

这里的问题有两点。首先，我需要在执行操作后调用 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");
  });
});

使用 React Native 和 Hooks 时，在 Jest 测试期间状态不会更新

State is not updating during Jest tests when using React Native and Hooks

reactjs

jestjs

react-native

enzyme

react-hooks