Testing for component/props is undefined with Enzyme in ReactJS

Question

I'm trying to test if the LoginContainer component via props exists in the Header with Enzyme, but I'm not having luck.

Here's my main app:

import React from 'react'
import Header from '../components/Header'
import LoginContainer from './LoginContainer'

const App = () => (
    <Header login={<LoginContainer />} />
)
export default App

My Header:

import React from "react";
const Header = ({login}) =>
    <header role="banner">
        {login}
    </header>
export default Header

And this is my Test:

import React from 'react'
import { shallow } from 'enzyme'
import Header from '../components/Header'

const setup = props => {
    const component = shallow(
        <Header {...props} />
    )
    return {
        component: component
    }
}
describe('Header component', () => {
    it('should render login', () => {
        const { component } = setup();
        console.log(component.props({ login })) //this is undefined
    })
})

The problem is when I run the test it seems that login(LoginContainer) props is undefined. Can someone advice please?

where do you call setup? I dont see any call.

Avraam Mavridis
– Avraam Mavridis

2017-02-28 13:36:02 +00:00
Commented Feb 28, 2017 at 13:36 — Avraam Mavridis
– Avraam Mavridis, Commented Feb 28, 2017 at 13:36
sorry, forgot to add. I've just updated.

angular_learner
– angular_learner

2017-02-28 13:38:08 +00:00
Commented Feb 28, 2017 at 13:38 — angular_learner
– angular_learner, Commented Feb 28, 2017 at 13:38
You are not passing anything to setup

Avraam Mavridis
– Avraam Mavridis

2017-02-28 13:40:55 +00:00
Commented Feb 28, 2017 at 13:40 — Avraam Mavridis
– Avraam Mavridis, Commented Feb 28, 2017 at 13:40

Hosar · Accepted Answer · 2017-02-28 14:17:39Z

3

You should get the instance first.

NOTE: When called on a shallow wrapper, .props() will return values for props on the root node that the component renders, not the component itself. To return the props for the entire React component, use wrapper.instance().props. See .instance() => ReactComponent

e.g.

            it('should have props', () => {                
                const l = <div>Login ...</div>;
                const {component} = setup({login:l});
                console.log(component.instance().props.login);
                expect(component.instance().props.login).to.exist;
            });

answered Feb 28, 2017 at 14:17

Hosar

5,3224 gold badges31 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

angular_learner Over a year ago

The above gives an error: TypeError: Cannot read property 'exist' of undefined. :(

Hosar Over a year ago

That's because I'm using Chai for the example. If you are not using Chai, you should use another expectation, like to.have.length or to.equal depending of what you expect.

angular_learner Over a year ago

I know. I've tried everything to.have.length,to.equal,.to.equal(true), toBe(1) but none of them worked. Always getting undefined. I really don't know what I'm doing wrong :(

Avraam Mavridis · Accepted Answer · 2017-02-28 13:42:21Z

0

You are not passing anything to setup.

import React from 'react'
import { shallow } from 'enzyme'
import Header from '../components/Header'

const setup = props => {
    const component = shallow(
        <Header {...props} />
    )
    return {
        component: component
    }
}
describe('Header component', () => {
    it('should render login', () => {
        const { component } = setup({ login: <LoginContainer/> });
        expect(component.props().login).toBeDefined()
    })
})

answered Feb 28, 2017 at 13:42

Avraam Mavridis

8,97023 gold badges88 silver badges136 bronze badges

1 Comment

angular_learner Over a year ago

Thank you for advice, but your solution still shows undefined or Expected value to be defined, instead received "undefined"

Collectives™ on Stack Overflow

Testing for component/props is undefined with Enzyme in ReactJS

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related