如何在酶中调用多个 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。但我不确定这是否是问题所在。