反应测试错误组件与孩子

Question

我是在 React 中测试组件的新手。我正在尝试使用 Jest 和 Enzyme 测试一个组件。

地址JCpenney1.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 个 proptypes，其中两个是必需的，您必须在挂载组件时通过它们进行测试。
我也更喜欢挂载它们而不是浅挂载它们，因此您可以像这样更改测试（其中 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)
    })
})