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

Question

I am doing shallow testing. Here is my container component code:

 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 page:

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

    });
});

So here I am simply checking whether Formbody child component consists of property parentId or not. And while I run the test I am getting the following error:

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

For Details error click this link:

Error Details

Please Help me how to fix this problem

`shallow` doesn't render child components so you'll either need to [dive](https://airbnb.io/enzyme/docs/api/ShallowWrapper/dive.html) to your component or use `mount` — Brian Adams, Feb 21 '19 at 12:07
I also have tried with mount but still having same problem.Actually I have multiple component inside Jcpenney component, so how to pass them in mount — developerExecutive, Feb 22 '19 at 05:32

score 0 · Answer 1 · answered Aug 14 '19 at 21:48

the problem is wrapper.find() is not finding the component.

you imported the component but I think you exported it wrong. the way you imported shows that you export default the component or maybe you forgot to export it. check it if you exported or default exported

or

wrapper.find("withStyles(FormBodyComponent)") //you do not need to import

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

1 Answers1