Тестирование компонента Login React с использованием jest и энзима.

Это продолжение другого учебника, который я написал. ссылку можно найти здесь.

Итак, в предыдущем уроке мы говорили о том, что такое шутка и фермент, и как они помогают нам тестировать компонент реакции. в этом руководстве мы создадим простой компонент входа в систему и будем тестировать его с помощью jest.

Компонент входа в систему

import React from 'react';
export default class Login extends React.Component{
constructor() {
  super()
  this.state = {
  username: '',
  password: '',
  isLogined: false
 }
}
handleInputChange = (event) => {
this.setState({
    [event.target.name]: event.target.value
  })
}
submitClick=() =>
{
if((this.state.username=="krishankantsinghal") &&   (this.state.password=="krishankant123"))
{
   this.setState({isLogined:true});
}
}
render() {
return (
<div>
 <input type="text" name="username" hint="username" onChange=    {this.handleInputChange} />
<input type="password" name="password" hint="password" onChange={this.handleInputChange} />
<button  name="submit" onClick={this.submitClick}> Submit</button></div>);
}
}

это простой компонент входа в систему, имеющий 2 тестовых элемента ввода и одну кнопку. при вводе мы добавили событие изменения, поэтому всякий раз, когда пользователь вводит какое-либо значение, оно обновляется в состоянии компонента.

import React from 'react';
import { shallow } from 'enzyme';
import login from './index'
import Login from './index';
describe('Test case for testing login',() =>{
let wrapper;
test('username check',()=>
{
wrapper = shallow(<Login/>);
wrapper.find('input[type="text"]').simulate('change', {target: {name: 'username', value: 'krishankantsinghal'}});
expect(wrapper.state('username')).toEqual('krishankantsinghal');
})
it('password check',()=>{
wrapper = shallow(<Login/>);
wrapper.find('input[type="password"]').simulate('change', {target: {name: 'password', value: 'krishankant123'}});
expect(wrapper.state('password')).toEqual('krishankant123');
})
it('login check with right data',()=>{
wrapper = shallow(<Login/>);
wrapper.find('input[type="text"]').simulate('change', {target: {name: 'username', value: 'krishankantsinghal'}});
wrapper.find('input[type="password"]').simulate('change', {target: {name: 'password', value: 'krishankant123'}});
wrapper.find('button').simulate('click');
expect(wrapper.state('isLogined')).toBe(true);
})
it('login check with wrong data',()=>{
wrapper = shallow(<Login/>);
wrapper.find('input[type="text"]').simulate('change', {target: {name: 'username', value: 'krishankantsinghal'}});
wrapper.find('input[type="password"]').simulate('change', {target: {name: 'password', value: 'krishankant1234'}});
wrapper.find('button').simulate('click');
expect(wrapper.state('isLogined')).toBe(false);
})
})

Здесь мы выполняем 4 тестовых примера. в первом тестовом примере «проверка имени пользователя» мы вставляем имя пользователя с помощью ключевого события. а затем проверьте, что переменная состояния эквивалентна вставленному значению в текстовом поле.

Во втором поле, таком как имя пользователя, мы вводим пароль и сравниваем значения.

В третьем тестовом случае мы моделируем событие нажатия кнопки и извлекаем имя пользователя и пароль из состояния и сравниваем со значением, это правда, чем мы уверены, что компонент входа в систему работает должным образом.

Таким же образом в четвертом тесте мы проверяем негативный сценарий.