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。但是我不确定这是问题所在。

如何在酶中调用多个setProps？

2 个答案: