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

Answer 1

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.

Answer 2

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