unit test a react component- jest, enzyme

Question

I am unit testing react component. One component imports other component and use its props. Here are jsx files :

class First extends React.PureComponent {
    render() {
        const { name, isSelected, onClick } = this.props;
        const activeClass = isSelected ? styles.active : '';
        return (
            <div
                className={`${styles.first} ${activeClass}`}
                role="button"
                tabIndex={0}
                onClick={() => onClick(name)}
            >
                {name}
            </div>
        );
    }
}

First.propTypes = {
    name: PropTypes.string.isRequired,
    isSelected: PropTypes.bool,
    onClick: PropTypes.func,
};

export default First;

Here is my second class that imports this class : i

mport First from '../First/First';

const Second = ({ values, passedVal, onClick }) => {
    const second = values.map(vlaue =>
        <First
            key={value}
            name={value}
            isSelected={value === passedVal}
            onClick={onClick}
        />,
    );

    return (
        <div >
            {Second}
        </div>
    );
};

Second.propTypes = {
    values: PropTypes.arrayOf(PropTypes.string),
    passedVal: PropTypes.string,
    onClick: PropTypes.func,
};

export default FilterList;

Here is my test. I want to test isSelected condition in my test :

describe('Second - Unit test', () => {
    let props;
    let secondComponent;

    const second = () => {
        if (!secondComponent) {
            secondComponent = shallow(<Second {...props} />);
        }
        return secondComponent;
    };
      beforeEach(() => {
        props = Second.defaultProps;
        secondComponent = undefined;
    });

   it('verify value of isSelected ', () => {
             props.passedVal='value01';
             props.value=['value01'];
            console.log(props.isSelected);
           });

It gives me undefined as this is prop of First class. How can i verify this logic here. Need to make instance of first and then check?

Gilad Artzi · Accepted Answer · 2017-10-12 05:20:38Z

1

props.isSelected will be undefined, as you do not pass any value to it, and it does not have a default prop.

I think that instead of:

props.passedVal='value01';
props.value=['value01'];

You'll want to use:

secondComponent.setProps({
  passedVal: 'value01',
  values: ['value01']
});

Notice that in your test, the component is already mounted, and thus assigning new values to the props object will not actually affect the component. Using enzyme's setProps will though. You can read a bit more about that: https://github.com/airbnb/enzyme/blob/master/docs/api/ShallowWrapper/setProps.md

Furthermore, isSelected is a prop of the First component, so please notice that when you try to check its value in the test.

edited Oct 12, 2017 at 5:20

answered Oct 12, 2017 at 5:15

Gilad Artzi

3,0841 gold badge17 silver badges24 bronze badges

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

4 Comments

SeleniumTester Over a year ago

I tried above, it gives me error "can not read property 'setProps' of undefined".

Gilad Artzi Over a year ago

Are you sure you call the second function which renders the component?

SeleniumTester Over a year ago

Yes, i am able to set property . I verified using console.log() . I am facing issue in testing isSelected prop. How can i call it? its prop of first class? can i not test it here? If i get correctly, when component is rendered isActive should be there. I tried using : const isActive= secondComponent.find('div'); expect(isActive).toEqual(true); but it failed.

Gilad Artzi Over a year ago

I recommend using enzyme's mount function in this case instead of the shallow, as it will also render the First component. Then, after you set the props, you can query the First component and check its props, something like: secondComponent.find(First).prop('isSelected')

GibboK · Accepted Answer · 2017-10-12 07:15:42Z

1

Wen using shallowthe test is executed on component as a unit, and does not indirectly asserting on behavior of child components. However you could check for a property of a child component using find, example (not tested):

const wrapper = shallow(<First/>);
expect(wrapper.find(Second).first().prop('isSelected')).to.equal('yourValue');

answered Oct 12, 2017 at 7:15

GibboK

74.3k149 gold badges453 silver badges676 bronze badges

Collectives™ on Stack Overflow

unit test a react component- jest, enzyme

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related