Question

我的以下测试有效，

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { CardSection, Card, Input, Button } from './common';
import { emailChanged, passwordChanged, loginUser } from '../actions';
import { connect } from 'react-redux';

class LoginForm extends Component {
    onEmailChange(text) {
        this.props.emailChanged(text);
        //Its like setState to action, the text is send as a parameter to our action.
    }

    onPasswordChange(text){
        this.props.passwordChanged(text);
    }

    onButtonPress(){
        this.props.loginUser( this.props.email, this.props.password );
    }

    renderError(){
        if (this.props.error){
            <View style={{ backgroundColor: 'white' }}>
                <Text style={ Styles.errorTextStyle }>
                    {this.props.error}
                </Text>
            </View>
        }
    }

    render() {
        return(
            <Card>
                <CardSection>
                    <Input
                        label='Email'
                        placeHolder='email@gmail.com'
                        onChangeText={this.onEmailChange.bind(this)}
                        value={this.props.email}
                        //What is this function bind to?

                        //Actually, this bind function has a 'this' keyword and 'this' keyword is actually a
                        //parameter that is send to the onEmailChange, 'this' is recieved by 'text' param as the
                        //text written in the email field so its binded and called whenever user writes anything
                        //in the field of email.

                        //We're using 'this' onEmailChange is a call me back (callback) function that will invoke 
                        //when input is pressed or not pressed, that is why we're using bind.
                    />
                </CardSection>

                <CardSection>

                    <Input 
                        secureTextEntry
                        label='Password'
                        placeHolder='password'
                        onChangeText={this.onPasswordChange.bind(this)}
                        value={this.props.password}
                    />
                </CardSection>

                {this.renderError()}

                <CardSection>
                    <Button onPress={this.onButtonPress.bind(this)}> Login </Button>
                </CardSection>
            </Card>
        );
    }
}

const Styles = {
    errorTextStyle: {
        fontSize: 20,
        alignSelf: 'center',
        color: 'red'
    }
}

const mapStateToProps = (state) => {
    return {
        email: state.auth.email,
        password: state.auth.password,
        error: state.auth.error
    };
    console.log(state.auth.email);
};
const mapDispatchToProps = (dispatch) => {
    return {
        emailChanged: (emailAddress) => dispatch(emailChanged(emailAddress),
        passwordChanged: (password) => dispatch(passwordChanged(password)),
        loginUser: (email, password) => dispatch(loginUser(email, password))
    }
};

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

但是我甚至需要蝙蝠侠和蜘蛛侠通过：我需要检查output.text（）是否有 - ＆GT; [ '超人'， '蝙蝠侠'， '蜘蛛侠']

无法做到

let output = mount(story);
      expect(output.text()).toContain('Superman');

output.text（）将包含“超人是最好的”或“蜘蛛侠是最好的”

Answer 1

You can add your own matcher代替toContain。

expect.extend({
  toContainHero(text) {
    let pass = false;
    const heroes = ['Superman','Batman','Spiderman'];
    heroes.forEach((hero) => {
      pass = text.indexOf(hero) !== -1;
    })
    if (pass) {
      return {
        message: () =>
          `expected hero to be found`,
        pass: true,
      };
    } else {
      return {
        message: () => `expected hero to be not found`,
        pass: false,
      };
    }
  },
});

然后做：

expect(output.text()).toContainHero();

Answer 2

这样的事情对你来说是更好的答案：

expect(output.text()).toEqual(expect.stringMatching(/^(Batman|Superman|Spiderman)/));

期望从一组jest中获取文本，使用React获取酶

2 个答案: