jest.setup.js

Object.assign(global, require('jest-chrome'))
// Mocks chrome API calls needed for autofill to run successfully
// @ts-ignore
chrome.runtime.sendMessage.mockImplementation(
    (message, callback) => {
        let response = {}
        if (message.getAddresses) {
            response = {
                privateAddress: '123test321',
                personalAddress: 'test'
            }
        }
        callback(response)
    }
)

// The autofill script bails if context is insecure, this enables tests to run
global.isSecureContext = true

const crypto = require('crypto')

Object.defineProperty(global.self, 'crypto', {
    value: {
        ...global.self.crypto,
        // @ts-ignore TS doesn't know of `crypto.webcrypto.subtle`
        subtle: crypto.webcrypto.subtle,
        getRandomValues: arr => crypto.randomFillSync(arr)
    }
})

/**
 * Utility function that mocks the `IntersectionObserver` API. Necessary for components that rely
 * on it, otherwise the tests will crash. Recommended to execute inside `beforeEach`.
 * @param intersectionObserverMock - Parameter that is sent to the `Object.defineProperty`
 * overwrite method. `jest.fn()` mock functions can be passed here if the goal is to not only
 * mock the intersection observer, but its methods.
 * @source https://javascript.tutorialink.com/js-testing-code-that-uses-an-intersectionobserver/
 */
function setupIntersectionObserverMock ({
    root = null,
    rootMargin = '',
    thresholds = [],
    disconnect = () => null,
    observe = () => null,
    takeRecords = () => [],
    unobserve = () => null
} = {}) {
    class MockIntersectionObserver {
        constructor () {
            this.root = root
            this.rootMargin = rootMargin
            this.thresholds = thresholds
            this.disconnect = disconnect
            this.observe = observe
            this.takeRecords = takeRecords
            this.unobserve = unobserve
        }
    }

    Object.defineProperty(window, 'IntersectionObserver', {
        writable: true,
        configurable: true,
        value: MockIntersectionObserver
    })

    Object.defineProperty(global, 'IntersectionObserver', {
        writable: true,
        configurable: true,
        value: MockIntersectionObserver
    })
}
setupIntersectionObserverMock()

/**
 *  Enable the use of clientWidth, clientHeight, offsetWidth and offsetHeight on html elements
 *  @source https://github.com/jsdom/jsdom/issues/2342#issuecomment-468253441 (adapted)
 **/
// Enables setting clientWidth by the data-mock-clientWidth attribute or the property _jsdomMockClientWidth
Object.defineProperty(window.HTMLElement.prototype, 'clientWidth', {
    get: function () {
        const mockClientWidthAttribute = this.getAttribute('data-mock-clientWidth')
        if (mockClientWidthAttribute) return mockClientWidthAttribute

        return this._jsdomMockClientWidth || 0
    }
})
// Enables setting clientHeight by the data-mock-clientHeight attribute or the property _jsdomMockClientHeight
Object.defineProperty(window.HTMLElement.prototype, 'clientHeight', {
    get: function () {
        const mockClientHeightAttribute = this.getAttribute('data-mock-clientHeight')
        if (mockClientHeightAttribute) return mockClientHeightAttribute

        return this._jsdomMockClientHeight || 0
    }
})
// Enables setting offsetWidth by the data-mock-offsetWidth attribute or the property _jsdomMockOffsetWidth
Object.defineProperty(window.HTMLElement.prototype, 'offsetWidth', {
    get: function () {
        const mockOffsetWidthAttribute = this.getAttribute('data-mock-offsetWidth')
        if (mockOffsetWidthAttribute) return mockOffsetWidthAttribute

        return this._jsdomMockOffsetWidth || 0
    }
})
// Enables setting offsetHeight by the data-mock-offsetHeight attribute or the property _jsdomMockOffsetHeight
Object.defineProperty(window.HTMLElement.prototype, 'offsetHeight', {
    get: function () {
        const mockOffsetHeightAttribute = this.getAttribute('data-mock-offsetHeight')
        if (mockOffsetHeightAttribute) return mockOffsetHeightAttribute

        return this._jsdomMockOffsetHeight || 0
    }
})

// getComputedStyle is super slow on jsdom, by providing this mock we speed tests up significantly
const defaultStyle = {
    display: 'block',
    visibility: 'visible',
    opacity: '1',
    paddingRight: '10'
}
const mockGetComputedStyle = (el) => {
    return {
        // since we don't load stylesheets in the tests, the style prop is all the css applied, so it's a safe fallback
        getPropertyValue: (prop) => el.style?.[prop] || defaultStyle[prop]
    }
}
// @ts-ignore
jest.spyOn(window, 'getComputedStyle').mockImplementation(mockGetComputedStyle)