Question

我有一个登录屏幕，该屏幕具有一种方法，调用该方法时将分派一个动作。我想使用笑话和酶来测试是否在按下按钮时调用了此函数，因此是否分派了动作。我尝试了许多不同的方式，但我无法实现。

screens / login.js

import React, { Component } from 'react';
import {
  KeyboardAvoidingView,
  TextInput,
  StyleSheet,
  Text,
  Button,
  TouchableOpacity
} from 'react-native';
import { connect } from 'react-redux';

import { login } from 'actions/sessions.js';

export class LoginScreen extends Component {

  constructor(props){
    super(props);
    this.state = {
      email: '',
      password: '',
      error: ''
    }
  }

  requestLogin = async () => {
    if(this.checkFields()){
      this.setState({error: ''});
      this.props.loginRequest(this.state.email, this.state.password);
    }
  }

  checkFields = () => {
    let { email, password } = this.state;
    const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if(!re.test(email)){
      this.setState({error: 'E-mail must be valid'})
      return false;
    }else if(email == '' || password == ''){
      this.setState({error: 'All fields are required!'});
      return false
    }else{
      return true;
    }
  }

  handleEmailText = (email) => {
    this.setState({email})
  }

  handlePasswordText = (password) => {
    this.setState({password})
  }


  render(){
    return(
      <KeyboardAvoidingView style={styles.container} enabled={true} behavior="padding">
        <Text>{this.state.error || this.props.error}</Text>
        <TextInput
          onChangeText={(e) => this.handleEmailText(e)}
          value={this.state.email}
          keyboardType="email-address"
          textContentType="emailAddress"
          autoCapitalize="none"
          placeholder="E-mail"
          style={styles.input}
        />
        <TextInput
          onChangeText={(e) => this.handleEmailPassword(e)}
          value={this.state.password}
          placeholder="Password"
          textContentType="password"
          autoCapitalize="none"
          secureTextEntry={true}
          style={styles.input}
        />
        <Button style={styles.button}
          title="Sign In"
          onPress={() => this.requestLogin()}/>
      </KeyboardAvoidingView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    width: "50%",
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    paddingLeft: 20,
    paddingRight: 20,
    margin: 10
  }
})

const mapDispatchToProps = dispatch => {
  return {
    loginRequest: (email, password) => dispatch(login(email, password))
  }
}

const mapStateToProps = state => {
  return {
    error: state.sessions.error
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen);

测试 /screens/login.test.js

import React from 'react';
import { shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
import renderer from 'react-test-renderer';
import configureStore from 'redux-mock-store';

import { LoginScreen } from 'screens/Login';

describe('LoginScreen', () => {


  it('should dispatch login action when button clicked', async () => {
    const mockStore = configureStore();
    const initialState = {};
    const store = mockStore(initialState);
    const wrapper = shallow(<LoginScreen store={store}/>)
    wrapper.setState({email: 'foo@bar.com', password: '1234'})
    const component = await wrapper.dive();
    component.find('button').simulate('click');
    expect(store.getActions()).toMatchSnapshot();
  });

})

使用这种方法时，它表示simulate is meant to be run on 1 node. 0 found instead.我不知道如何进行测试。

Answer 1

在本地反应中，您可以使用：

component.find('Button').props().onPress();

模拟用户交互。

此外，您应该使用Button而不是button（组件名称）。

用开玩笑和酵素检查功能是否正在调度动作

1 个答案: