web-dev-qa-db-ja.com

Alert内の「onPress」をどのように模倣しますか？

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

誰かがこれを試みたことがありますか？

javascriptunit-testingreact-nativejestjsenzyme
14
Anthony Urbina

私はモジュールをモックし、スパイでテストするためにそれをインポートします。次に、クリックイベントをトリガーします。これはスパイを呼び出します。スパイから 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)
})
18
Andreas Köberle