Test logic in calls onResize when parent has been resized gives false positive

[ghost]

In looking at the test below, if I make a few modifications which should presumable break the test, it still passes. I've removed the logic that I believe is representing the resize, but it still passes the test.

Original Test (passing)

    it('calls onResize when parent has been resized', (done) => {
        spy(ContainerDimensions.prototype, 'onResize')
        const wrapper = mount(
            <div ref="node" id="node" style={{ width: 10 }}>
                <ContainerDimensions>
                    <MyComponent />
                </ContainerDimensions>
            </div>
        , { attachTo: document.body })
        const el = wrapper.render()
        el.css('width', 10)
        setTimeout(() => {
            el.css('width', 100) // Triggering onResize event
            expect(ContainerDimensions.prototype.onResize.calledTwice).to.be.true
            ContainerDimensions.prototype.onResize.restore()
            done()
        }, 10)
    })

Modified Test (still passing, but how?)

    it('calls onResize when parent has been resized', (done) => {
        spy(ContainerDimensions.prototype, 'onResize')
        const wrapper = mount(
            <div ref="node" id="node" style={{ width: 10 }}>
                <ContainerDimensions>
                    <MyComponent />
                </ContainerDimensions>
            </div>
        , { attachTo: document.body })
        // =========================================================
        // const el = wrapper.render()
        // el.css('width', 10)
        // =========================================================
        setTimeout(() => {
            // =====================================================
            // el.css('width', 100) // Triggering onResize event
            // =====================================================
            expect(ContainerDimensions.prototype.onResize.calledTwice).to.be.true
            ContainerDimensions.prototype.onResize.restore()
            done()
        }, 10)
    })

[okonet]

Good question!

[okonet]

Can it be the spy cache? I'm not on my computer now so can't check.

[ghost]

Seems that the culprit is the attachTo configuration passed into mount(). When I remove that, the test breaks.

[ghost]

Seems that the calls to el.css() aren't actually triggering a resize either. onResize() spy only shows one call made throughout the test.

    it('calls onResize when parent has been resized', (done) => {
        const resizeSpy = spy(ContainerDimensions.prototype, 'onResize')
        const logResizeCount = (msg) => console.log(msg, resizeSpy.callCount)

        logResizeCount('before mount') // 0
        const wrapper = mount(
            <div ref="node" id="node" style={{ width: 10 }}>
                <ContainerDimensions>
                    <MyComponent />
                </ContainerDimensions>
            </div>
        )
        logResizeCount('after mount') // 1
        const el = wrapper.render()
        el.css('width', 10)
        logResizeCount('after first resize') // 1
        setTimeout(() => {
            el.css('width', 100) // Triggering onResize event
            logResizeCount('after second resize') // 1
            expect(ContainerDimensions.prototype.onResize.calledTwice).to.be.true
            ContainerDimensions.prototype.onResize.restore()
            done()
        }, 10)
    })

[okonet]

Apparently this is a bug in how I use element resize detector: #12 (comment)