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

Question

In my useEffect hook I initialise a Leaflet map. It works all fine. But in the test it says "Map container not found.". To confirm I tried console.log(document.getElementById('mapid')) . It finds the element when I run my app, but also not in the test. The DOM seems to be not yet rendered when I try to access it in useEffect .

This is my useEffect code:

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

And this the according test:

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

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

How can I access the DOM in useEffect when testing?

Answer 1

I ended up not checking the DOM but the Redux action I dispatch in the useEffect:

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')
})

I was not able to access the refs inside the test. I think this is because the actual Map component is wrapped inside of a Provider and therefore I can't access the refs of Map at the mounted component.