您将如何在 Alert 中模拟 'onPress'？

Question

我可以模拟 Alert 来测试它的 alert 方法是否被调用，但我真正想要测试的是按下 alert 中的 ok 按钮。

import { Alert } from 'react-native';

it('Mocking Alert', () => {
    jest.mock('Alert', () => {
        return {
          alert: jest.fn()
          }
        };
      });

    const spy = jest.spyOn(Alert, 'alert');
    const wrapper = shallow(<Search />);

    wrapper.findWhere(n => n.props().title == 'Submit').simulate('Press');
    expect(spy).toHaveBeenCalled(); //passes
})

虽然我完全不确定如何对此进行测试。这是我要测试的通用组件。

export default class Search extends Component{

    state = {
      someState: false
    }

    confirmSubmit(){
      this.setState(state => ({someState: !state.someState}))
    }

    onPress = () => {
      Alert.alert(
        'Confirm',
        'Are you sure?'
        [{text: 'Ok', onPress: this.confirmSubmit}] //<-- want to test this
      )
    }

    render(){
      return(
       <View>
         <Button title='Submit' onPress={this.onPress}
       </View>
      )
    }
}

有人试过吗？

Answer 1

我会模拟模块并将其导入以测试间谍。然后触发点击事件。这将称为间谍。从间谍中，您可以使用 mock.calls 获取调用它的参数，以获取 onPress 方法并调用它。然后你可以测试你的组件的状态。

import Alert from 'Alert'

jest.mock('Alert', () => {
    return {
      alert: jest.fn()
    }
});


it('Mocking Alert', () => {
    const wrapper = shallow(<Search />);
    wrapper.findWhere(n => n.props().title == 'Submit').simulate('Press');
    expect(Alert.alert).toHaveBeenCalled(); // passes
    Alert.alert.mock.calls[0][2][0].onPress() // trigger the function within the array
    expect(wrapper.state('someState')).toBe(true)
})

Answer 2

我在测试 Alert 和尝试为 Alert 模拟 onPress 时遇到了同样的问题。我正在使用 TypeScript 实现我的代码。我设法通过使用 spyOn 来处理这个问题：

const spyAlert = jest.spyOn(Alert, 'alert');

然后要使用 onPress，您需要忽略该行的类型检查，否则您将得到 - 无法调用可能是 'undefined'.

的对象

// @ts-ignore
spyAlert.mock.calls[0][2][0].onPress();

您将如何在 Alert 中模拟 'onPress'？

How would you mock 'onPress' within Alert?

javascript

unit-testing

jestjs

react-native

enzyme