How to call multiple setProps in enzyme?

Question

I have the following test:

import React from 'react';
import { configure, shallow } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import ListAdapter from './ListAdapter'
import TweetCard from './TweetCard'


describe('<ListAdapter />', () => {
    let wrapper, props

    beforeEach(() => {
        props = {
            data: [{
                user: { profile_image_url: 'someimage.png', name: 'Some name' },
                created_at: 'Sat Feb 02 19:06:09 +0000 2019',
                text: 'Hello word'
            }],
        };
        wrapper = shallow(<ListAdapter  {...props} />);

    })

    it('renders without crashing', () => {
        expect(wrapper).toBeDefined();
    });

    it('renders one link anchor element', () => {
        expect(wrapper.find('button')).toHaveLength(1);
        expect(wrapper.find(TweetCard)).toHaveLength(0);
    });

    it('check anchor tag text when it gets data and than try to set props', () => {
        expect(wrapper.find('button').at(0).text()).toEqual('You have 1 tweet.');
        var { data } = wrapper.instance().props
        data = [data].concat({
            user: { profile_image_url: 'someimage.png', name: 'Some name' },
            created_at: 'Sat Feb 02 19:06:09 +0000 2019',
            text: 'Hello word'
        })
        wrapper = wrapper.setProps({ data })
        expect(wrapper.find('button').at(0).text()).toEqual('You have 2 tweets.');
        expect(wrapper.instance().props.data).toHaveLength(2)


    // UPDATED TEST TO GET 3 TWEETS
data = wrapper.instance().props
        data = [data].concat({
            user: { profile_image_url: 'someimage.png', name: 'Some name' },
            created_at: 'Sat Feb 02 19:06:09 +0000 2019',
            text: 'Hello word'
        })
        wrapper = wrapper.setProps({ data })
        expect(wrapper.find('button').at(0).text()).toEqual('You have 3 tweets.');
        expect(wrapper.instance().props.data).toHaveLength(3)
    });

    it('check state initialization defaults', () => {
        // we have one props getting passed so it will be 1
        expect(wrapper.state('data_count')).toEqual(1);
    });

    it('test onClick event of button', () => {
        // Try to click and than we should have toggleFlag be true and data_count be 0
        wrapper.find('button').simulate('click')
        expect(wrapper.state('data_count')).toEqual(0);
        expect(wrapper.find(TweetCard)).toHaveLength(1);
        expect(wrapper.find('button')).toHaveLength(0);
    });

})

And, on test where it says : check anchor tag text when it gets data and than try to set props I want to add more props after adding the second one, but I tried the same way for third prop and it just simply doesnt affect! Enzyme sometime is really awesome sometime just doenst make it easy. I know setProps is a async call too.

Anything?

Thanks

Sounds like you know your problem then... you need to wait for `setProps` to finish if it's async. — Matthew Herbst, Feb 04 '19 at 10:05
[`setProps`](https://airbnb.io/enzyme/docs/api/ShallowWrapper/setProps.html) is not async. what happens to your test case? I've created simple test case where `wrapper.setProps` is updated with changed array data and everything works as expected. — skyboyer, Feb 04 '19 at 10:13
@skyboyer I have updated that test case to get 3 props...please have a look, but it didnt work. Instead it says `You have 1 tweet` — Maverick, Feb 04 '19 at 10:29
I've just figured out you are referring to `wrapper.instance`. I use `wrapper.setProps()` and `wrapper.props()`. try use the same way(while I believe it should be the same) — skyboyer, Feb 04 '19 at 10:35
@skyboyer, I have tried that as well, it gives undefined than! — Maverick, Feb 04 '19 at 10:39
Since we can't see your component, I would suggest if you have any kind of lifecycle methods causing the render not to update, that could be your problem. Replace `wrapper = wrapper.setProps(...)` with just `wrapper.setProps(...)` and try `wrapper.update()` to make sure the component is in correct state. — Matty J, Feb 13 '19 at 15:01

score 3 · Answer 1 · answered Feb 04 '19 at 10:14

3

Acually no need to reassing to wrapper again.

wrapper.setProps({ data }) instead of wrapper = wrapper.setProps({ data })

You have written right but Your data is already array then you did [data].concat instead of data.concat. But I'm not sure that this is the issue.

answered Feb 04 '19 at 10:14

Martin

201
1
4

I have updated that test case to get 3 props...please have a look, but it didnt work. Instead it says `You have 1 tweet` – Maverick Feb 04 '19 at 10:30
`data = wrapper.instance().props` it gets props but not props.data you should change to `data = wrapper.instance().props.data` – Martin Feb 04 '19 at 10:41
Could you please console.log(wrapper.instance().props) or debug I want to see what shows – Martin Feb 04 '19 at 10:47
That is one more annoying thing, console.log sometimes doesnt work at all! – Maverick Feb 04 '19 at 11:07
:)))) Do you use webstorm? u can debug easly – Martin Feb 04 '19 at 12:29
VSCode! :) is what I am using – Maverick Feb 04 '19 at 12:34
It will be more easy to debug if you use WebStorm))) – Martin Feb 04 '19 at 13:14
If console.log doesn't work then your test isn't getting to it either due to a failed test or an issue with your logic. – CWSites Feb 12 '19 at 17:09

Shubham Khatri · Answer 2 · 2019-02-19T06:53:32.753

You can update the props multiple times using setProps, but you aren't setting the props correctly i.e you are not using the concat method correctly. Also you need not set the return value of setProps

it('check anchor tag text when it gets data and than try to set props', () => {
    expect(wrapper.find('button').at(0).text()).toEqual('You have 1 tweet.');
    var { data } = wrapper.instance().props
    data = data.concat({
        user: { profile_image_url: 'someimage.png', name: 'Some name' },
        created_at: 'Sat Feb 02 19:06:09 +0000 2019',
        text: 'Hello word'
    }) // data here is now an array of objects
    wrapper.setProps({ data })
    expect(wrapper.find('button').at(0).text()).toEqual('You have 2 tweets.');
    expect(wrapper.instance().props.data).toHaveLength(2)

    data = wrapper.instance().props
    data = data.concat({
        user: { profile_image_url: 'someimage.png', name: 'Some name' },
        created_at: 'Sat Feb 02 19:06:09 +0000 2019',
        text: 'Hello word'
    })
    wrapper.setProps({ data })
    expect(wrapper.find('button').at(0).text()).toEqual('You have 3 tweets.');
    expect(wrapper.instance().props.data).toHaveLength(3)
});

@Maverick, does the above solution work for you. Could you please confirm — Shubham Khatri, Feb 19 '19 at 17:36

How to call multiple setProps in enzyme?

2 Answers2