Header.jsx

import { useContext } from "react";
import FilterContext from "../contexts/FilterContext";
import Menu from "./Menu";

function Header() {

    const { setFilter } = useContext(FilterContext);

    return (
        <header className="header">
            <div className="header__container">
                <div className="header__mobile">
                    <div className="header__drawer menu header__drawer--active">
                        <img className="menu__img" src="assets/menu.svg" alt="menu" />
                        <p className="menu__title">menu</p>
                    </div>
                    <div className="header__drawer close">
                        <img src="assets/close.svg" alt="fechar menu" />
                        <p className="close__title">fechar</p>
                    </div>
                    <h1 className="header__logo">
                        <img className="header__img" src="assets/rchlo.svg" alt="Logo" />
                    </h1>
                </div>
                <div className="header__desktop">
                    <h1 className="header__logo">
                        <img className="header__img" src="assets/riachuelo.svg" alt="Logo" />
                    </h1>
                </div>
                <div className="header__search">
                    <img className="header__icon" src="assets/search.svg" alt="lupa" />
                    <input className="header__input" role="search" type="search" placeholder="O que você está procurando?"
                        onChange={(event) => setFilter(event.target.value)}
                    />
                </div>

                <Menu />
            </div>
        </header >
    );
}

export default Header;

Header.test.js

import { fireEvent, render, screen } from '@testing-library/react';
import Header from './Header';
import FilterContext from '../contexts/FilterContext';
import Menu from './Menu';

jest.mock('./Menu');

it('Deve renderizar o header da aplicação', () => {

  Menu.mockImplementation(() => <div>Menu Mock</div>);

  const setFilter = jest.fn();
  const filter = null;

  render(
    <FilterContext.Provider value={{ filter, setFilter }}>
      <Header />
    </FilterContext.Provider>
  );
  const element = screen.getByText(/fechar/i);
  expect(element).toBeInTheDocument();
});

it('Deve alterar o filtro quando o usuário digitar um valor na busca', () => {
  Menu.mockImplementation(() => <div>Menu Mock</div>);

  let filter = null;
  const setFilter = f => filter = f;

  render(
    <FilterContext.Provider value={{ filter, setFilter }}>
      <Header />
    </FilterContext.Provider>
  );
  
  const input = screen.getByRole("search");

  fireEvent.change(input, { target: { value: "camisetas" } });
  
  expect(filter).toBe("camisetas");
});