Реагируй на модульное тестирование (шутка) - PullRequest
Новая
       6

Реагируй на модульное тестирование (шутка)

0 голосов
/ 25 июня 2018

Я студент, который плохо знаком с модульным тестированием Jest, я нашел несколько уроков, связанных с Jest, и я написал некоторый пример кода, чтобы изучить это. Но, к сожалению, это не сработало. Я пытался несколько часов решить эту проблему, но не смог найти способ.

Вот мой код.

Это мой App.js 

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

export default class App extends Component {

  constructor(props) {
    super(props);

    this.state = {
      username: '',
      password: '',
    };
  }

  onLogin() {
    const { username, password } = this.state;

    Alert.alert('Credentials', `${username} + ${password}`);

  }

  render() {

    return (
      <KeyboardAvoidingView style={styles.container}>

        <TextInput 
          value={this.state.username}
          onChangeText={(username) => this.setState({ username })}
          placeholder={'Username'}
          returnKeyType = "next"
          keyboardType = "email-address"
          autoCapitalize = "none"
          autoCorrect = {false}
          onSubmitEditing = {()=> this.passwordInput.focus()}
          style={styles.input}/>

        <TextInput
          value={this.state.password}
          onChangeText={(password) => this.setState({ password })}
          placeholder={'Password'}
          secureTextEntry={true}
          returnKeyType = "go"
          style={styles.input}
          ref = {(input) => this.passwordInput = input}/>

        {/* <Button
          title={'Login'}
          style={styles.input}
          onPress={this.onLogin.bind(this)}/> */}

          <TouchableOpacity style={styles.button} onPress={this.onLogin.bind(this)}>
            <Text>Login</Text>
        </TouchableOpacity>

      </KeyboardAvoidingView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
  input: {
    width: '90%',
    height: 44,
    padding: 10,
    borderWidth: 1,
    borderColor: 'black',
    marginBottom: 10,
    marginLeft: 10,
    marginRight: 10,
  },

  button: {
    width: '90%',
    height: 44,
    padding: 10,
    borderWidth: 0,
    alignItems: 'center',
    color: '#F5FCFF',
    marginBottom: 10,
    marginLeft: 10,
    marginRight: 10,
  },

});

Это App.test.js 

import React from 'react';
import Login from './App';
import { shallow } from 'enzyme';

describe('Login', function () {
  let component;
  let textInput;
  const defaultState = {text: ''};

  beforeEach(function () {
    component = shallow(<Login />);
    textInput = component.find('TextInput');
  });

  it('has default state', function () {
    expect(component.state()).to.eql(defaultState);
  });

  it('renders input field with placeholder', function () {
    const expectedPlaceholder = 'Username';
    expect(textInput).to.have.length(1);
    expect(textInput.props().placeholder).to.eql(expectedPlaceholder);
  });

});

package.json 

{
  "name": "AwsomProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.3.1",
    "react-native": "0.55.4",
    "yarn-install": "^1.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-jest": "23.0.1",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react-native": "^4.0.0",
    "chai": "^4.1.2",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-15": "^1.0.5",
    "enzyme-adapter-react-16": "^1.1.1",
    "jest": "^23.1.0",
    "mocha": "^5.2.0",
    "react-native-mock": "^0.3.1",
    "react-test-renderer": "16.3.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

Спасибо ..

1 Ответ

0 голосов
/ 25 июня 2018

Для набора тестов не удалось запустить: не удается найти ошибку «ответная реакция / lib / ReactComponentTreeHook» модуля, используйте одну и ту же версию реакции и реакции-dom.См. Подробности здесь: Jest завершается неудачно с ошибкой: не удается найти модуль реагировать / lib / ReactComponentTreeHook

...