Teste a renderização condicional de componentes com base em dados ContextAPI usando Jest e Enzyme

Question

Quero fazer testes de unidade no componente Form. usersão dados de contexto que são compartilhados com todos os componentes filhos.

 const { user } = useContext(UserContextAPI);
 return (
  <> {!user ? (
        <>
          {navigation.push({
            pathname: "./Login",
            state: { editProduct: "edit" },
          })}
        </>
      ) : (
        <Form>.....</From>
      )
  }
 </>
);

Eu escrevi um caso de teste simples para testar o componente do formulário

 it("should contain From component", () => {
   let wrapper = mount(
      <BrowserRouter>
        <EditProduct.WrappedComponent />
      </BrowserRouter>
    );
    expect(wrapper.find("Form").exist()).toEqual(true);
  });

Mas o caso de teste falhou, eu acho que com base na renderização condicional, ele não vai testar o componente Form. Como poderíamos fazer a renderização condicional com base nos dados de contexto?

Answer 1

Tente adicionar o provedor de contexto no nível superior:

it("should contain From component", () => {
    const UserContextAPI = React.createContext({});

    let wrapper = mount(
        <UserContextAPI.Provider value="{}">
            <BrowserRouter>
                <EditProduct.WrappedComponent />
            </BrowserRouter>
        </UserContextAPI.Provider>
    );
    expect(wrapper.find("Form").exist()).toEqual(true);
});

Answer 2

Eu fiz assim e funcionou. @Ken Bekov Créditos para você

it("should contain From component", () => {
   const history = createBrowserHistory();
    const state = { pid: 1 };
    history.push("/EditProduct", state);
    wrapper = mount(
      <UserContextAPI.Provider value={{ user: 1 }}>
        <Router history={history}>
          <EditProduct.WrappedComponent />
        </Router>
      </UserContextAPI.Provider>
    );
    expect(wrapper.find("Form").exist()).toEqual(true);
});