unittest for reactjs component fails on function passed as props

Question

I am trying to write a unit test for a simple component that wrote.

Here is my component:

const ErrorWrpper = (props) =>(
<div className={props.class} style={props.validateForm(props.inputType)?
{display: 'none'}:{}}>
<span>{props.message}</span></div>
)
 export default  ErrorWrpper;

And here is my test:

import React from 'react';
import { expect } from '../../test_helper';
import { shallow } from 'enzyme';
import { it, describe, beforeEach } from 'mocha';
import  ErrorWrapper  from '../../../src/app/components/login/ErrorWrapper';

let errorWrapper;
describe("ErrorWrapper component unit tests", () => {
 function validateForm(test){

}
before(() => {

    errorWrapper = shallow(<ErrorWrapper class="test"  inputType="all" validateForm={this.validateForm}/>);
});


// these tests check that each className that should exist, exists
describe("className check", () => {
    it('should have className test', () => {
        expect(errorWrapper.find('test')).to.exist;
    });
})
})

Now when I run it I get this:

ErrorWrapper component unit tests "before all" hook:
 TypeError: Cannot read property 'validateForm' of undefined

As you see I am trying to feed validateError function as props but still I am getting the error. Any idea?

score 1 · Accepted Answer · answered Mar 01 '18 at 07:21

It's not clear why are you using this at all in your test component instantiation. This should work:

errorWrapper = shallow(<ErrorWrapper class="test" inputType="all" validateForm={validateForm} />);

Also, there's a typo in your component: ErrorWrpper is ErrorWrapper, right? You're also not passing it the message prop.

score 0 · Answer 2 · answered Mar 01 '18 at 07:00

Looks like you are not getting the reference to this in your before all hook. Try to use arrow function to define your validateForm function so it will auto bind it with this reference or you need to bind validateForm function manually like this.validateForm.bind(this).

unittest for reactjs component fails on function passed as props

2 Answers2