如何在 Jest 和 Enzyme 中执行无状态组件内的函数以进行测试

Question

我有一个用 Recompose withHandlers HOC 包装的父组件。我有一个名为 removeGiftHandler 的函数，我想将其作为回调传递给子组件，该回调将更改保存在父组件中的道具中的状态（使用 withState）。

我目前正在测试父组件，特别是 removeGiftHandler 函数。问题是因为该函数正在传递给子组件，所以我没有要模拟的事件。此外，如果它是一个 class 组件，我可以使用 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 是没有 Recompose HOC 的基础组件。

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

Answer 1

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

如何在 Jest 和 Enzyme 中执行无状态组件内的函数以进行测试

How to Execute a Function Inside a Stateless Component for Testing in Jest and Enzyme

functional-programming

reactjs

jestjs

enzyme

recompose