Question

我有一个用Recompose withHandlers HOC包装的父组件。我有一个名为removeGiftHandler的函数，我想作为回调传递给子组件，该回调将更改父组件中props中保留的状态（使用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的基本组件。

有人可以帮我解决这个问题吗？

Answer 1

您需要潜水2次而不是3次才能达到withHandlers HOC。在道具上，您可以调用该函数并检查状态是否正确更新。

如何在无状态组件内部执行功能以进行Jest和Enzyme测试

1 个答案: