DOM is not cleared between tests in lwc-jest

Question

For some reason DOM is not cleared between lwc jest tests (I think).

What I want to test that page renders with lightning-input disabled by default and after button click it's enabled.

Test pass perfect if they are ran individually, but not when in same file.

Template:

<template>
    <lightning-button onclick={enable} label="Enable"></lightning-button>
    <lightning-input label="foo" disabled={isDisabled}></lightning-input>
</template>

Controller: import {LightningElement} from 'lwc';

export default class ButtonPress extends LightningElement {
    isDisabled = true
    enable(){
        this.isDisabled = false
    }
}

Test:

import {createElement} from 'lwc';
import buttonPress from 'c/buttonPress';
const flushPromises = () => new Promise(resolve => setImmediate(resolve))

describe('c-button-press', () => {
    afterEach(() => {
        while (document.body.firstChild) {
            document.body.removeChild(document.body.firstChild);
        }
    });
    describe('when setup is complete', () => {
        const element = createElement('c-button-press', {
            is: buttonPress
        });
        document.body.appendChild(element);
        describe('when rendered', () => {
            let elements
            beforeEach(async () => {
                await flushPromises()
                elements = Array.from(element.shadowRoot.querySelectorAll('lightning-input'))
            })
            it('displays disabled input field', () => {
                expect(elements).toHaveLength(1)
                expect(elements.filter(i => i.disabled)).toHaveLength(1)
            })
        })
    })
});
describe('c-button-press', () => {
    afterEach(() => {
        while (document.body.firstChild) {
            document.body.removeChild(document.body.firstChild);
        }
    });
    describe('when setup is complete', () => {
        const element = createElement('c-button-press', {
            is: buttonPress
        });
        document.body.appendChild(element);
        describe('when clicking edit', () => {
            let elements
            beforeEach(async () => {
                await new Promise(r => setTimeout(r, 10));
                const buttons = element.shadowRoot.querySelectorAll('lightning-button');
                buttons[0].click();
                await flushPromises()
                elements = element.shadowRoot.querySelectorAll('lightning-input')
            })
            it('enables field editing', async () => {
                expect(Array.from(elements).filter(i => i.disabled)).toHaveLength(0)
            })
        })
    })
})

Answer 1

IMHO your test hierarchy is incorrect, and can also be much more simplified.

It should to be:

describe('c-button-press')...
   afterEach()...
   it('displays disabled input field')...
   it('enables field editing')...