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! 😉
Top comments (0)