MutationObserver는 DOM의 변경 사항을 감시하고 이에 응답하는 유용한 메커니즘입니다.

MutationObserver 인터페이스는 DOM 트리에 대한 변경 사항을 감시하는 기능을 제공합니다.

다음은 테마 클래스 변경을 감시하는 예입니다.

    function setUpThemeClassObservers() {
        const observer = new MutationObserver(() => {
            const themeClass = this.getThemeClass();
            this.fireStylesChangedEvent('themeChanged');
        });

        observer.observe(this.eGridDiv, {
            attributes: true,
            attributeFilter: ['class'],
        });

        // we must disconnect otherwise "this" will not be GC'd
        // causing a memory leak
        return () => observer.disconnect();
    }

그러나 연결을 끊는 것을 잊어버린 경우 MutationObserver 함수 내에서 액세스하는 항목에 따라 메모리 누수에 노출될 수 있습니다.

관찰자의 연결이 끊어졌는지 확인할 수 있는 테스트가 있으면 좋지 않을까요?

코드 자동 검증

DOM을 관찰하는 모든 MutationObserver도 연결이 끊어졌는지 확인하는 것이 가능하다는 것이 밝혀졌습니다. (MutationObserver를 설정하기 위해 다른 코드 경로를 실행해야 하는 경우 두 개 이상의 테스트가 필요할 수 있습니다)

관찰 및 연결 끊기 메서드에 대한 하위 모의를 사용하여 전역 MutationObserver를 모의하는 아이디어입니다. 모의 객체가 반환되기 전에 테스트 실행이 끝날 때 모든 인스턴스의 유효성을 검사할 수 있도록 배열에 기록합니다.

describe('Mutation Observers Disconnected', () => {

    let originalMutationObserver: typeof MutationObserver;

    const allMockedObservers: any = [];
    const mutationObserverMock = jest.fn().mockImplementation(() => {
        const mock = {
            observe: jest.fn(),
            disconnect: jest.fn(),
            takeRecords: jest.fn(),
        };
        allMockedObservers.push(mock);
        return mock;
    });

    beforeEach(() => {
        // Ensure we can restore the real MutationObserver after the test
        originalMutationObserver = global.MutationObserver;
        global.MutationObserver = mutationObserverMock;
    });

    afterEach(() => {
        global.MutationObserver = originalMutationObserver;
    });

    test('observer always disconnected after destroy', async () => {
        const api = createGrid();
        // Perform some actions if required to exercise the code paths
        api.destroy();

        expect(allMockedObservers.length).toBeGreaterThan(0);
        for (const mock of allMockedObservers) {
            expect(mock.observe).toHaveBeenCalled();
            expect(mock.disconnect).toHaveBeenCalled();
        }
    });
});

이런 방식으로 테스트 중에 설정된 각 MutationObserver도 테스트가 끝나면 연결이 끊어지는지 확인할 수 있습니다.

Stephen Cooper - AG Grid의 수석 개발자
X @ScooperDev에서 나를 팔로우하세요.