Question

我是一名学生，他是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"
  }
}

谢谢..

Answer 1

对于测试套件无法运行：找不到模块'react / lib / ReactComponentTreeHook错误，请使用相同版本的react和react-dom。在此处引用更多详细信息：Jest fails with error: Cannot find module 'react/lib/ReactComponentTreeHook'

反应本机单元测试（开玩笑）

1 个答案: