Reactjs 如何在无状态组件内执行函数，以便在Jest和Ezyme中进行测试

我有一个父组件，我用Recompose

withHandlers

HOC包装了它。我有一个名为

removeGiftHandler

的函数，我想将其作为回调传递给子组件，该回调将更改父组件中道具中保存的状态（使用

和state

）

我目前正在测试父组件，特别是

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)

注

baseApp

是没有重新组合HOC的基本组件

---

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

你需要潜水2次而不是3次，才能用Handlers到达

HOC。在那里的道具上，您可以调用函数并检查状态是否正确更新

您需要潜水2次而不是3次，才能使用Handlers到达

HOC。在那里的道具上，您可以调用函数并检查状态是否正确更新

也许你可以潜水2次而不是3次，这样你就可以得到

withHandlers

部分，调用函数并检查状态是否已更新，但我不确定这是否有效。我们要做的是将视图从重新组合中分离出来，因此我们没有返回

compose（…）（组件）

而是有一个文件返回

compose（…）

一个文件返回组件和一个只返回

逻辑（视图）

的

index.js

。通过这种方法，我们可以轻松地测试重组部分和独立的渲染功能。如何分别测试合成（…）部分？看看要点：@AndreasKöberle潜水两次确实有效。谢谢你花时间写要点。对不起，我没有早点给你回电话。我一定会把这个测试组合（…）的模式单独留在我的脑海中，以备将来需要使用。好的，我会提供它作为答案。也许你可以潜水2次而不是3次，这样你就可以得到

with handlers

部分，调用函数并检查状态是否已更新，但我不确定这会起作用。我们要做的是将视图从重新组合中分离出来，因此我们没有返回

compose（…）（组件）

而是有一个文件返回

compose（…）

一个文件返回组件和一个只返回

逻辑（视图）

的

index.js

。通过这种方法，我们可以轻松地测试重组部分和独立的渲染功能。如何分别测试合成（…）部分？看看要点：@AndreasKöberle潜水两次确实有效。谢谢你花时间写要点。对不起，我没有早点给你回电话。我一定会把这个测试组合（…）的模式单独留在我的脑海中，以防将来需要使用它。好的，我会提供它作为答案。

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([])
            })
        })
    })
})