Mockando a propriedade window.screen com Jest

Para realizar um mock da propriedade window.screen e definir um valor padrão para realizar algum teste, basta usar utilizar a função jest.spyOn, disponibilizada pela lib de testes jest.

Por exemplo:

jest.spyOn(window.screen, "width", "get").mockReturnValue(1000);
console.log(window.screen.width);

O resultado para o console.log acima irá retornar 1000.

O mesmo pode ser feito para a propriedade height.

Vamos ao exemplo:

jest.spyOn(window.screen, "height", "get").mockReturnValue(500);
console.log(window.screen.height);

O resultado para o console.log acima irá retornar 500.

A seguir deixo um exemplo completo em React de uma implementação mockando a instância width da propriedade Screen.

React:

export const Menu = () => {
  const showMenuDesktop = window.screen.width > 400;

  return (
    <>
      {showMenuDesktop && (
        <MenuDesktop getByTestId="component-MenuDesktop" />
      )}
    </>
  );
};

Teste unitário:

describe("Component MenuDesktop", () => {
  it("NÃO deve renderizar MenuDesktop em tela pequena", () => {
    jest.spyOn(window.screen, "width", "get").mockReturnValue(300);
    const { getByTestId } = render(<Menu/>);
    expect(getByTestId("component-MenuDesktop")).toBeFalsy();
  });

  it("Deve renderizar MenuDesktop em tela grande", () => {
    jest.spyOn(window.screen, "width", "get").mockReturnValue(1024);
    const { getByTestId } = render(<Menu/>);
    expect(getByTestId("component-MenuDesktop")).toBeTruthy();
  });
});

💬 Dúvidas, sugestões ou críticas, utilize os comentários abaixo! 😉