Question

我正在学习一些使用jest进行反应+测试，我有一个三个数字输入和一个按钮的组件。这是一个只有乘法运算的简单计算器。

不要担心代码的其余部分，我只是试图模拟执行操作的点击（在这种情况下，它将调用模拟函数，如测试中所示）

这是测试

  constructor(props) {
    super(props)

    this.state = {
      email: '',
      password: '',
      uCount: '',
      data: []
    };
  }

  _onPressButton() {

    this.getData();

    console.log("email:", this.state.email);
    console.log("passwd:", this.state.password);

    console.log("data", this.state.data);
    console.log("uCount", this.state.uCount);

    if (this.state.uCount < 1) {
        Alert.alert('Fail')
    } else {
        this.props.navigation.navigate('LoginSuccess', { email: this.state.email, password: this.state.password})      
    }
  }

 getData(){
    var url="myurl.php?email=" + this.state.email + "&password=" + this.state.password;
    console.log("URL:", url);
    return fetch(url)
    .then((response) => response.json())
    .then((responseJson) => {
     this.setState({
      data: responseJson.Subscriber,
      uCount: responseJson.Subscriber[0].count
    })
    })
    .catch((error) => {
      console.error(error);
    });
  }

我认为 button.onclick 分配是错误的，我尝试使用原型和ecma6 Object.assign，但结果相同，测试失败。

我用jest.fn（）模拟了onclick按钮，一旦按下按钮就应该调用这个方法，但它总是告诉我：

给定实例化的乘数>按钮执行操作应调用click方法期望（jest.fn（））。toBeCalled（）

关于如何解决这个问题的任何想法？

Answer 1

在您的示例中，button为ShallowWrapper，您无法像那里那样设置onclick。你应该将模拟函数传递给onClick按钮prop。我更喜欢只测试组件的公共API，因为私有方法是一个应该隐藏给组件用户的实现细节。

// Your component
const MyButton = ({ label, onClick }) => (
  <button type='button' onClick={onClick}>{label}</button>
)

// Your test
describe('<MyButton/>', () => {
  test('should call onClick callback', () => {
    const onClick = jest.fn();
    const wrapper = shallow(<MyButton onClick={onClick}/>);
    wrapper.simulate('click');
    expect(onClick).toHaveBeenCalled();
  });
});

无法模拟点击开玩笑测试

1 个答案: