@backstage/core-components/dist/testUtils.d.ts

Core components used by Backstage plugins and apps

import { Breakpoint } from '@material-ui/core/styles/createBreakpoints';

/**
 *  This is a mocking method suggested in the Jest docs, as it is not implemented in JSDOM yet.
 *  It can be used to mock values for the Material UI `useMediaQuery` hook if it is used in a tested component.
 *
 *  For issues checkout the documentation:
 *  https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
 *
 *  If there are any updates from Material UI React on testing `useMediaQuery` this mock should be replaced
 *  https://mui.com/material-ui/react-use-media-query/#testing
 *
 * @public
 *
 * @example
 * Match with any media query:
 * ```ts
 * mockBreakpoint({ matches: true });
 * ```
 */
declare function mockBreakpoint(options: {
    matches: boolean;
}): void;
/**
 *  This is a mocking method suggested in the Jest docs, as it is not implemented in JSDOM yet.
 *  It can be used to mock values for the Material UI `useMediaQuery` hook if it is used in a tested component.
 *
 *  For issues checkout the documentation:
 *  https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
 *
 *  If there are any updates from Material UI React on testing `useMediaQuery` this mock should be replaced
 *  https://mui.com/material-ui/react-use-media-query/#testing
 *
 * @public
 *
 * @example
 * Set the initial breakpoint:
 * ```ts
 * mockBreakpoint({ initialBreakpoint: 'md' });
 * ```
 *
 * @example
 * Map media queries to breakpoints:
 * ```ts
 * mockBreakpoint({ queryBreakpointMap: { '(min-width:1500px)': 'xl', '(min-width:1000px)': 'lg', '(min-width:700px)': 'md', '(min-width:400px)': 'sm', '(min-width:0px)': 'xs', } });
 * ```
 *
 * @example
 * Change the breakpoint during the test:
 * ```ts
 * const { set } = mockBreakpoint({ initialBreakpoint: 'md' });
 * set('lg');
 * ```
 **/
declare function mockBreakpoint(options: {
    /** Defaults to 'lg' */
    initialBreakpoint?: Breakpoint;
    /** Defaults to \{ '(min-width:1920px)': 'xl', '(min-width:1280px)': 'lg', '(min-width:960px)': 'md', '(min-width:600px)': 'sm', '(min-width:0px)': 'xs' \} */
    queryBreakpointMap?: Record<string, Breakpoint>;
}): {
    set(value: string): void;
    remove(): void;
};

export { mockBreakpoint };