Получение статуса сбоя при выполнении шутки? - PullRequest
Новая
       12

Получение статуса сбоя при выполнении шутки?

0 голосов
/ 28 января 2020

Я пытаюсь написать первый тест в своем приложении, но получаю сообщение об ошибке, как показано ниже 

 ● Login component tests › should have 3 input fields !

expect(received).toHaveLength(expected)

Expected length: 3
Received length: 0
Received object: {}

  13 | 
  14 |         it('should have 3 input fields !', ()=> {
> 15 |             expect(wrapper.find('input')).toHaveLength(3);
     |                                           ^
  16 |         });
  17 | 
  18 | 

  at Object.it (src/components/auth/Login.test.js:15:43)

Test Suites: 1 failed, 1 total

Мой Login.test.js файл 

    import React from 'react';
import { shallow } from 'enzyme';
import Login from './Login';
import {Provider} from 'react-redux';
import store from '../../../src/store';

    describe('Login component tests', ()=> {
        const wrapper = shallow(
                                <Provider store={store}>
                                    <Login />
                                </Provider>
                        );

        it('should have 3 input fields !', ()=> {            
            expect(wrapper.find('input')).toHaveLength(3);           
        });



    });

И мой login component 

    import React,{useState} from 'react';
import {connect} from 'react-redux';
import {Link,Redirect} from 'react-router-dom';
import {login} from '../../actions/auth';
import PropTypes from 'prop-types';


const Login = ({ login ,isAuthenticated}) => {
      const [formData,setFormData]=useState({
          email:'',
          password:''
      });
      const {email,password}=formData;
      const onChange= e =>
      setFormData({...formData,[e.target.name]:e.target.value});

      const onSubmit= async e=>{
          e.preventDefault();
          // alert('click works');
          login({email,password});

      }

      console.log('ajajaj'+isAuthenticated);
      //redirect if login
      if(isAuthenticated){
          return <Redirect  to='/dashboard' />
      }


    return (
    <section className="container">
    <h1 className="large text-primary">Sign In</h1>
      <p className="lead"><i class="fa fa-user" aria-hidden="true"></i>Sign in your Account</p>
        <form className="form" onSubmit={e => onSubmit(e) }>
      <div className="form-group">
          <input type="email" placeholder="Email Address"
          name="email"
          value={email}
          onChange={e=>onChange(e)}
          required
          />

        </div>
        <div className="form-group">
          <input type="password"  placeholder="Password" name="password" minLength="6" value={password} onChange={e=>onChange(e)}
          required
          />
        </div>

        <input type="submit" className="btn btn-primary" value="Login" />

      </form>
      <p className="my-1">
        don't have an account? <Link to="/register">Sign Up</Link>
      </p>
      </section>
    )
}
Login.propTypes = {
  login:PropTypes.func.isRequired,
  isAuthenticated:PropTypes.bool
}
const mapStateToProps= state =>({
  isAuthenticated:state.auth.isAuthenticated
})
export default connect(mapStateToProps,{login})(Login);

1 Ответ

0 голосов
/ 28 января 2020

Поскольку журнал ошибок говорит, что он получил object вместо длины. Итак, что вы можете сделать, это:

Я полагаю, первым должно быть mount вместо shallow: 

import { mount } from 'enzyme';



 const wrapper = mount(<Provider store={store}>
                             <Login />
                         </Provider>);

mount будет генерировать дерево всех вложенных компонентов, если Любые.

Сейчас в тесте: 

it('should have 3 input fields !', ()=> {            
    expect(wrapper.find('input').length).toHaveLength(3); //<----check for length          
});
...