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

与孩子一起反应测试错误组件

1 个答案: