React testing error component with children

Question

I am new to testing components in React. I am trying to test a component with Jest and Enzyme.

AddressJCpenney1.js:

import React from 'react';
import PropTypes from 'prop-types';
import './AddressJCpenney1.css';
import withStyles from 'react-jss';

const styles = {
    divStyle:{      
    textAlign: props =>props.textalign,
    width: props =>props.addressWidth,
 }
};
function AddressJCpenney1({ children, classes}) {       
    return (
        <div className={classes.divStyle}>
            {children}
        </div>
    );
}
AddressJCpenney1.propTypes = {      
    children: PropTypes.node.isRequired,       
    classname: PropTypes.string.isRequired,     
    textalign:PropTypes.string,
    /** Width of the section will be defined here*/
    addressWidth:PropTypes.string

};
AddressJCpenney1.defaultProps = {   
    classname: 'address',
    textalign:'left',
    addressWidth:'100%'
};

export default withStyles(styles)(AddressJCpenney1)

My test file is AddressJcpenney1-test.js:

import React from 'react';
import {shallow, mount, render} from 'enzyme';

import AddressJCpenney1 from '../AddressJCpenney1/AddressJCpenney1';

// describe what we are testing
describe('Address Component', () =>{
    // make our assertion and what we expect to happen
    it('Address block is working fine',() =>{
        expect(shallow(<AddressJCpenney1/>).find('div.divStyle').exists()).toBe(true)
    })
})

While running this test file I am getting this error:

   src/components/__tests__/AddressJCpenney1-test.js
  ● Console

    console.error node_modules/prop-types/checkPropTypes.js:19
      Warning: Failed prop type: The prop `children` is marked as required in `AddressJCpenney1`, but its value is `undefined`.
          in AddressJCpenney1

  ● Address Component › Address block is working fine

    expect(received).toBe(expected) // Object.is equality

    Expected: true
    Received: false

       9 |     // make our assertion and what we expect to happen
      10 |     it('Address block is working fine',() =>{
    > 11 |         expect(shallow(<AddressJCpenney1/>).find('div.divStyle').exists()).toBe(true)
         |                                                                            ^
      12 |     })
      13 | })

      at Object.toBe (src/components/__tests__/AddressJCpenney1-test.js:11:76)

Can anyone suggest me where I am going wrong, also how to pass child props in this case.

Eliâ Melfior Eliâ Melfior · Accepted Answer · 2019-02-15T11:04:10

You have declared 4 proptypes, and two of them are required, you must pass them when you mount your component to test it.
I also prefer to mount them instead of shallow mounting them, so you could change the tests like this (where mockedCLassName and mockedChildren are changed accordingly):

import React from 'react';
import {shallow, mount, render} from 'enzyme';

import AddressJCpenney1 from '../AddressJCpenney1/AddressJCpenney1';

// describe what we are testing
describe('Address Component', () =>{
    // make our assertion and what we expect to happen
    it('Address block is working fine',() =>{
        var mockedChildren = [];
        var wrapper = mount(
                      <AddressJCpenney1 
                          className={'mockedClassName'}
                          children={mockedChildren}
                      />);
        expect(wrapper).find('div.divStyle').exists()).toBe(true)
    })
})

React testing error component with children

1 Answers