Jest / Enzyme React филиалы - PullRequest
Новая
       5

Jest / Enzyme React филиалы

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

Я пытаюсь проверить функцию фокуса, и тестовое покрытие говорит мне о ветвях. Вот компонент 

import React, { Component } from 'react';

import Input from '../../components/common/input/Input';
import Button from '../../components/common/button/Button';
import isEmpty from '../../components/common/utils/isEmpty';

class Form extends Component {
  state = { input: '', error: ''};

  onChange = e => this.setState({ ...this.state, input: e.target.value });
  onFocus = () => !isEmpty(this.state.error) && this.setState({ ...this.state, error: '' });

  onSubmit = e => {
    e.preventDefault();
    if(isEmpty(this.state.input)) return this.setState({ ...this.state, error: 'error' });
  };

  render() {
    const { input, error } = this.state;
    return (
      <form noValidate onSubmit={this.onSubmit} data-test='form'>
        <Input
          name='text'
          label='City'
          value={input}
          onChange={this.onChange}
          onFocus={this.onFocus}
          error={error}
          test='input'
        />
        <Button text='Search' isLoading={false} type='submit' />
      </form>
    );
  };
};

export default Form;

и тестовый файл 

import React from "react";
import { mount } from 'enzyme';
import Form from "../../../layout/navbar/Form";

const setComponent = (props) => {
  const component = mount(<Form {...props} />);
  return component;
}

describe("Navbar `Form` component", () => {
  let component;

  beforeEach(() => {
    component = setComponent();
  });

  it('Renders without errros', () => {
    expect(component).toMatchSnapshot();
  });

  describe('`onFocus` func call to clear errors', () => {
    it('Clears the error state if any', () => {
      component.find(`button[type='submit']`).simulate('click');
      component.find(`[data-test='input']`).simulate('focus');
      expect(component.state().error).toEqual('');
    });
  });

});

тест проходит успешно, но когда я тестирую покрытие, у меня есть ветвь на линии 11, которая является onFocus функцией

как я могу проверить другую ветвь, когда у меня нет ошибки в состоянии?

в основном onfocus => if ERROR setState(...this.state, error: '' )

спасибо

1 Ответ

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

чтобы ответить на мой вопрос: 

describe('`onFocus` event calls `onFocus` func', () => {
 test('If `state.error` has No value', () => {
   component.find('input').simulate('focus');
   expect(isEmpty(component.state().error)).toBeTruthy();
   expect(component.state().error).toEqual('');
 });
 test('If `state.error` has value', () => {
   component.setState({ error: 'error' });
   component.find('input').simulate('focus');
   expect(isEmpty(component.state().error)).toBeTruthy();
   expect(component.state().error).toEqual('');
 });
});
...