Как выполнить функцию внутри компонента без состояния для тестирования в Jest и Enzyme - PullRequest
Новая
       28

Как выполнить функцию внутри компонента без состояния для тестирования в Jest и Enzyme

0 голосов
/ 11 января 2019

У меня есть родительский компонент, который я обернул с помощью Recompose withHandlers HOC. У меня есть функция с именем removeGiftHandler, которую я хочу передать дочернему компоненту в качестве обратного вызова, который изменит состояние, сохраненное в подпорках в родительском компоненте (используя withState).

В настоящее время я тестирую родительский компонент, в частности функцию removeGiftHandler. Проблема заключается в том, что, поскольку функция передается дочернему компоненту, для меня нет события, которое можно смоделировать. Также, если бы это был компонент класса, я мог бы использовать wrapper.instance().removeGift(id), и это не было бы проблемой. Учитывая, что это функциональный компонент без сохранения состояния, это не так.

Вот код для компонента: 

const App = ({ addGiftHandler, state: { gifts } }) => (
    <div>
        <h1>Gift Giver</h1>
        <ListGroup>
            {map(
                ({ id }) => (
                    <ListGroupItem key={id}>
                        <Gift />
                    </ListGroupItem>
                ),
                gifts
            )}
        </ListGroup>
        <Button outline onClick={addGiftHandler}>
            Add Gift
        </Button>
    </div>
)

export default compose(
    withEnhancedState(INITIAL_STATE),
    withHandlers({
        addGiftHandler: ({ state: { gifts }, updateState }) => () =>
            updateState({ gifts: [...gifts, { id: inc(length(gifts)) }] }),
        removeGiftHandler: ({ state: { gifts }, updateState }) => id => () =>
            updateState({ gifts: filter(gift => gift.id !== id, gifts) }),
    })
)(App)

Как только removeGiftHandler будет должным образом проверен, планируется передать его компоненту Gift.

А вот соответствующий код для тестов: 

import React from 'react'
import { shallow } from 'enzyme'
import { length } from 'ramda'

import App from '.'

const getBaseApp = app =>
    app
        .dive()
        .dive()
        .dive()

describe('App', () => {
    const app = shallow(<App />)
    const baseApp = getBaseApp(app)

        //...

        describe('and the user wants to remove the added gift', () => {
            beforeEach(() => {
                //-----> trigger removeGiftHandler somehow <-----
            })

            it('removes the gift from `state`', () => {
                expect(app.props().state.gifts).toEqual([])
            })
        })
    })
})

Примечание baseApp - это базовый компонент без Рекомендовать HOC.

Может кто-нибудь помочь мне с этим вопросом?

1 Ответ

0 голосов
/ 15 января 2019

Вам нужно нырнуть 2 раза вместо 3, чтобы достичь withHandlers HOC. На реквизитах можно вызвать функцию и проверить, правильно ли обновлено состояние.

...