Получить триггерный элемент из всплывающего окна "Реакция-семантика" в шутке и фермент

Question

Я пытаюсь написать несколько тестов, но я не нашел, как получить триггерный элемент из Popup реагирующего-семантического-UI. Кто-нибудь знает?

Это всплывающее окно; Я хочу проверить иконку

<Popup trigger={<Icon name='plus' color='green' onClick={this.followItem.bind(this)} />} 
  content='Follow this item' />

текущий метод испытаний:

describe('Follow Icon', () => {
    it('should create a userItem when the follow icon is clicked', (done) => {
        const wrapper = mount(<MemoryRouter><ItemDetails match={{ params: { id: 1 } }} /></MemoryRouter>);
        const instance = wrapper.find(ItemDetails).instance();
        instance.getItem().then(() => {
            wrapper.update();
        }).then(() => {
            expect(wrapper.find(Popup)).toHaveLength(1);
            const follow = shallow(wrapper.find(Popup).prop('trigger')());
            // wrapper.find(...).prop(...) is not a function
            expect(follow.props().name).toBe('plus');
            done();
        });
    });
});

Answer 1

Я нашел решение, которое работает, но я не знаю, является ли это наилучшей практикой.

<Popup trigger={<Icon id='follow'/>

const follow = wrapper.find(Popup).find('#follow').first();

По какой-то причине он находит 2 элемента в "#follow", поэтому требуется.first();

Если кто-то найдет лучшее решение, не стесняйтесь, сообщите мне.

Answer 2

Я столкнулся с аналогичной проблемой, и мое решение для тестирования компонента Popup (на вашем примере) было:

<Popup 
  trigger={<Icon 
               name='plus'
               color='green'
               onClick={this.followItem.bind(this)} />} 
  content={<div className="content">Follow this item</div>}
/>

// after setting the wrapper
// to test the trigger property, as this is always rendered we just need to:
expect(wrapper.find(Icon).prop().name).toBe('plus');

// to test the component property, as this gets rendered in the document.body, 
// there is no way to assert on it using just one mount

const popupContentWrapper = mount(wrapper.find(Popup).instance().props.content);
expect(popupContentWrapper.find('.content').hostNodes()).toBeDefined()

// not sure if you notice the use of hostNodes here, but that's because find is
// returning both React components instances and DOM nodes, that match your query selector. hostNodes() solves the issue, reference: https://github.com/airbnb/enzyme/issues/836#issuecomment-401260477

Answer 3

Самый простой способ - вызвать функцию и отменить визуализацию результата. Допустим, у вас есть мелкая визуализация всплывающего окна, просто позвоните trigger функция и передать результат shallow:

const icon = shallow(popup.prop('trigger')())