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?

Answer 1

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.