TextInput onChangeText 设置 useState 值在 React Native Testing with Enzyme 中不起作用

Question

我想测试如果 TextInput 等于“”，用户不应导航到任何其他屏幕。

我试图让控制台日志更正确地理解，但现在的问题是，在 input.simulate("changeText", "any@email.com"); 正确发生后，控制台日志说来自测试的传入值是“any@email.com”但在 setValue(text); 发生后 console.log 表示 useState 值为“”。

为什么状态没有改变？我需要用 .update() 更新包装器吗？

这是我的 React Native 代码：

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

export const LoginContainer = (props) => {
  const [value, setValue] = useState("");

  const handleClick = () => {
    if (value !== "") {
      props.navigation.navigate("any other screen");
    }
  }

  return (
    <View>
      <TextInput
        test-id="login-input"
        onChangeText={(text) => {
          console.log("INPUT_TEXT:", text);
          setValue(text);
          console.log("STATE_TEXT:", value);
        }}
        value={value}
      />
      <Button test-id="login-button" onPress={() => handleClick()} />
    </View>
  );
}

控制台日志：

  console.log
    INPUT_TEXT: any@email.com

      at onChangeText (....)

  console.log
    STATE_TEXT: 

      at onChangeText (....)

  expect(jest.fn()).toHaveBeenCalledTimes(expected)

  Expected number of calls: 1
  Received number of calls: 0

测试代码：

import "react-native";
import React from "react";
import { shallow } from 'enzyme';
import { LoginContainer } from "...";
import { findByTestAttr } from '...';

const navigation = {
  navigate: jest.fn()
}

describe('correct login action', () => {
    const wrapper = shallow(<LoginContainer navigation={navigation} />);
    let input = findByTestAttr(wrapper, "login-input");
    let button = findByTestAttr(wrapper, "login-button");

    test('should not navigate to login mail screen if email adress is not entered', () => {
      input.simulate("changeText", "any@email.com");
      button.simulate("press");

      expect(navigation.navigate).toHaveBeenCalledTimes(1);

      //input.simulate("changeText", "");
      //button.simulate("press");
      //expect(navigation.navigate).toHaveBeenCalledTimes(0);
    });
});

Answer 1

你好setValue是一个异步函数所以它不会立即更新状态，你可以在下一次渲染之前看到下一个值

添加一个 console.log 如下所示

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

export const LoginContainer = (props) => {
  const [value, setValue] = useState("");

  const handleClick = () => {
    if (value !== "") {
      props.navigation.navigate("any other screen");
    }
  }
 // try to add console.log here and you will see the new value after click
 console.log("STATE_TEXT:", value);

  return (
    <View>
      <TextInput
        test-id="login-input"
        onChangeText={(text) => {
          console.log("INPUT_TEXT:", text);
          setValue(text);
        }} 
      // if you want the setValue to be executed immediately you can call it inside promise like below, however the value will still the same even after re-rendering
        //onChangeText={(text) => {
          //console.log("INPUT_TEXT:", text);
          //Promise.resolve().then(() => {
            //setValue(text);
            //console.log("STATE_TEXT after calling it inside promise:", value);
          //});
          //console.log("STATE_TEXT:", value);
        //});
        value={value}
      />
      <Button test-id="login-button" onPress={() => handleClick()} />
    </View>
  );
}

默认情况下，React 在 React 事件处理程序结束时重新渲染组件。有关如何反应更新状态的更多信息，请查看此博客 here

Answer 2

我用中的解决方案解决了这个问题。

test('should not navigate to login mail screen if email adress is not entered', () => {
    const wrapper = shallow(<LoginContainer navigation={navigation} />);
    input = findByTestAttr(wrapper, "login-input");

    input.simulate("changeText", "any@email.com");
    wrapper.update(); // update after changing the state
   
    // After performing update, should find button element
    button = findByTestAttr(wrapper, "login-button");
    button.simulate("press");
    expect(navigation.navigate).toHaveBeenCalledTimes(1);
});

TextInput onChangeText 设置 useState 值在 React Native Testing with Enzyme 中不起作用

TextInput onChangeText set useState value is not working in React Native Testing with Enzyme

reactjs

react-native

enzyme

react-native-textinput

react-native-state