Реагировать компонент ошибки тестирования с детьми

Question

Я новичок в тестировании компонентов в React.Я пытаюсь протестировать компонент с помощью Jest и 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)

Мой тестовый файл - 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)
    })
})

Во время выполнения этого тестового файла я получаю эту ошибку:

   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)

Может кто-нибудь подсказать мне, где я иду не так, а также как передать дочерний реквизит в этом случае.

Answer 1

Вы объявили 4 прототипа, и два из них необходимы, вы должны пройти их при монтировании компонента, чтобы протестировать его.
Я также предпочитаю монтировать их, а не монтировать, чтобы вы могли изменить тестывот так (где mockedCLassName и mockedChildren изменяются соответственно):

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)
    })
})