0

我正在做浅层测试。这是我的容器组件代码：

 class jcpenney1 extends Component {
        render() {
        const formId = uuidv1();
        return (
            <FormComponent formId={formId}>
                <HeaderJCpenny1 parentId={formId}>
                </HeaderJCpenny1>
                <FormBodyComponent parentId={formId}>
                                <AddressJCpenney1 classname="address" textalign="right" addressWidth="100%">
                        <WordJCpenney1 />
                    </AddressJCpenney1>
                </FormBodyComponent>
            </FormComponent>
        );
        }
export default jcpenney1;

jcpenney1.test.js页面：

import React from 'react';
import {shallow, configure, mount, render} from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import renderer from 'react-test-renderer';
import jcpenney1 from '../../containers/jcpenney/jcpenney1';
import FormComponent from '../../components/FormComponent/FormComponent';
import FormBodyComponent from '../../components/FormBodyComponent/FormBodyComponent';

import uuidv1 from 'uuid';
configure({ adapter: new Adapter() });
describe('JC penney1 container testing', () =>{
    let wrapper;
    const propIds ={
        formId: uuidv1(),
        word:"JCPenney Header",
        dynamicWordId: uuidv1()
    }
    it('should render all the components', () => {

        wrapper = renderer
        .create(<FormComponent children={mockedChildren} formId={propIds.formId}/>).toJSON();        
        expect(wrapper).toMatchSnapshot();
    });
    it('should render components which are wrapped with <HeaderJCpenny1 /> ', () => {        
        wrapper = mount(<HeaderJCpenny1 textalign="left" fontweight="bold" fontsize="16px" position="relative" parentId={propIds.formId}>
                        <TextBodyComponent>
                            <LogoJCpenney1 logopath="http://jpcpenny.com/logo.png" logowidth="306"></LogoJCpenney1>
                            <LineJCpenney1>                           
                                    <WordJCpenney1 wordVal={propIds.word} wordIndex={1} wordSecId={propIds.dynamicWordId} classname="logoJCpenney1" textalign="center" fontFamily="'Yanone Kaffeesatz', sans-serif" wordFontsize="71px" fontWeight="bold" letterSpacing="13px" paddingTop="10px" paddingBottom="0" paddingRight="10px" paddingLeft="10px" wordLineheight="81px" display="block" wordspacing="20px" wordPosition="absolute" wordTop="-13px" opacity="0">Company</WordJCpenney1>
                            </LineJCpenney1>                            
                        </TextBodyComponent> 
                    </HeaderJCpenny1>)        
        expect(wrapper.find(LogoJCpenney1)).toHaveLength(1);
        expect(wrapper.find(LineJCpenney1)).toHaveLength(1);
        expect(wrapper.find(WordJCpenney1)).toHaveLength(1);
        //await eventually(() => expect(wrapper.find("WordJCpenney1").text()).toEqual("Company"))
    });
    it('should render whole Form body component', () => {        
        wrapper = shallow(<jcpenney1 />);
        var formbodyJcpenney = wrapper.find(FormBodyComponent);       
        expect(formbodyJcpenney.props().parentId).toEqual(propIds.formId);

    });
});

所以在这里我只是检查 Formbody 子组件是否由属性 parentId 组成。当我运行测试时，我收到以下错误：

› 1 snapshot updated.
 FAIL  src/components/tests/jcpenney1.test.js
  ● JC penney1 container testing › should render whole Form body component

    Method “props” is meant to be run on 1 node. 0 found instead.

      48 |         wrapper = shallow(<jcpenney1 />);
      49 |         var addressJcpenney = wrapper.find(FormBodyComponent);
    > 50 |         expect(addressJcpenney.props().parentId).toEqual(propIds.formId);
         |                                ^
      51 |         //expect(wrapper).toMatchSnapshot();
      52 |         //expect(wrapper.contains('AddressJCpenney1')).to.equal(true);
      53 |     });

      at ShallowWrapper.single (node_modules/enzyme/build/ShallowWrapper.js:1875:17)
      at ShallowWrapper.props (node_modules/enzyme/build/ShallowWrapper.js:1140:21)
      at Object.props (src/components/tests/jcpenney1.test.js:50:32)

有关详细信息错误，请单击此链接：

错误详情

请帮助我如何解决这个问题

4

1 回答 1

0

问题是 wrapper.find() 没有找到组件。

您导入了组件，但我认为您将其导出错误。您导入的方式向您展示了export default该组件，或者您可能忘记了导出它。如果您exported或default exported

或者

wrapper.find("withStyles(FormBodyComponent)")//不需要导入

于 2019-08-14T21:48:12.970 回答