vendredi 5 juin 2020

Test onChange event, values fail to match regardless of the approach

I've been trying to test input onChange event using jest and enzyme and match the values but regardless of what I do I get failed test. here is the code:

import React from 'react';
import {mount} from 'enzyme';
import InputField from './InputField';

describe('InputField component', () => {

   let wrapped;
   let mockFunc;

   beforeEach(()=> {

     mockFunc = jest.fn();

        const props = {
            name: 'email',
            value: 'mytestemail@gmail.com',
            handleChange: mockFunc
        };

        wrapped = mount(<InputField {...props}/>)

    });

    it('should trigger onChange test 1', () => {

        wrapped.find('input').simulate('change', {
            target: { value: 'test 1'}
        });

        wrapped.update();

        expect(wrapped.find('input').props().value).toEqual('test 1')

    }

    it('should trigger onChange test 2', () => {

        wrapped.find('input').prop('onChange', { 
            target: { value: 'test 2' }
        }); 

        wrapped.update();

        expect(wrapped.find('input').props().value).toEqual('test 2')

    });

    it('should trigger onChange test 3', () => {

        const event = {
            target: { value: 'test 3'}
        };

        wrapped.find('input').simulate('change', event);

        expect(mockFunc).toBeCalledWith('test 3');

    });

};

all of the above tests fail and cant match values regardless of what I do. handleChange function attached to the input field updates values via hooks. what I have been doing wrong and should I take some other approach to unit test input fields ?

Aucun commentaire:

Enregistrer un commentaire