Как вызвать несколько setProps в ферменте?

Question

У меня есть следующий тест:

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

})

И, на тесте, где он говорит: check anchor tag text when it gets data and than try to set props Я хочу добавить больше реквизита после добавления второго, но я пытался таким же образом для третьего реквизитаи это просто не влияет!Фермент иногда просто потрясающий, иногда просто облегчает.Я знаю, что setProps тоже асинхронный вызов.

Что-нибудь?

Спасибо

Answer 1

Вы можете обновить реквизиты несколько раз, используя setProps, но вы неправильно настраиваете реквизиты, т. Е. Неправильно используете метод concat.Также вам не нужно устанавливать возвращаемое значение 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)
});

Answer 2

На самом деле нет необходимости повторно использовать wrapper.

wrapper.setProps({ data }) вместо wrapper = wrapper.setProps({ data })

Вы написали правильно, но ваш data уже массив, чем вы сделали [data].concat вместо data.concat.Но я не уверен, что это проблема.