jeudi 30 janvier 2020

Jest/Enzyme React branches

I`m trying to test a focus function and the test coverage tells me about branches. Here is the component

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;

and the test file

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('');
    });
  });

});

the test is passing but when I test coverage I have a branch on line 11, which is the onFocus function

how can I test the other branch when I have no error in the state?

basically the onfocus => if ERROR setState(...this.state, error: '' )

thank you

Aucun commentaire:

Enregistrer un commentaire