Question

在我的useEffect钩子中，初始化一个Leaflet映射。一切正常。但是在测试中，它显示“未找到地图容器”。为了确认我尝试了console.log(document.getElementById('mapid'))。它在我运行我的应用程序时找到元素，但在测试中却找不到。当我尝试在useEffect中访问DOM时，它似乎尚未呈现。

这是我的useEffect代码：

 useEffect(() => {
    console.log(document.getElementById('mapid'))
    map.current = Leaflet.map('mapid').setView([46.378333, 13.836667], 12)
 }, [])

这是根据测试：

describe('initialise map', () => {
    it('render map', () => {
        const MapComponent = () => <Provider store={store}><Map /></Provider>
        const component = mount(<MapComponent />)

        expect.some.really.unexpected.things
    })
})

测试时如何在useEffect中访问DOM？

Answer 1

我最终没有检查DOM，而是检查了在useEffect中调度的Redux动作：

it('should initialise map without markers', () => {
    const MapComponent = () => <Provider store={store}><Map /></Provider>

    mount(<MapComponent />)

    const [{type: actionType}] = store.getActions()
    expect(actionType).toEqual('ADD_MAP')
})

我无法访问测试中的引用。我认为这是因为实际的Map组件包装在Provider的内部，因此我无法在已安装的组件上访问Map的引用。

使用Jest / Enzyme测试时无法访问useEffect挂钩中的DOM

1 个答案: