Как издеваться над константным методом В компоненте в рамках интеграционного теста?

Question

Итак, я провожу интеграционный тест с jest & tesing-library. Итак, у меня есть мой "главный компонент" под названием "Продукт", который включает другой компонент, назовем его "ProductListings".

В "ProductListings" я нажимаю на div, который вызывает метод в функциональном компоненте. Как мне поиздеваться над этим, чтобы проверить это было вызвано?

  test('Clicking div calls method', async () => {
     render(<Product />);
     // THIS div is in ProductListings component.. that is contained within Product component
     const divToClickAdd = await screen.findByTestId('myDivWithOnClick')
     user.click(divToClickAdd); // clicking this div fires the method
     // how to do this?
     expect.THE-MOCKED-FUNCTION-TO-HAVE-BEEN-CALLED 
 });

// так выглядит ProductListing (псевдо). Я тестирую интеграцию компонента IN Products.

 const ProductListing = () => {

   // I WANT TO MOCK THIS "fireTheAPI" in my test above.
   const fireTheAPI = () => {
      // do some stuff
   }

   return (
     <div onClick={() => fireTheAPI()} data-testId="myDivWithOnClick">this is a product listing item</div>

   )
}

См. Мою проблему. Принесите родительский компонент, который содержит "внутренний компонент, ProductListings, и я получаю от него div и щелкаю... Мне нужно высмеять эту функцию В нем" fireTheAPI"

кстати, "Товар" выглядит примерно так:

const Product = () => {
   return (
      <div>
        <WhateverComponent />
        <div>
            <ProductListings /> // <--- mock a function in here
        </div>
     </div>
   )
}

Answer 1

Я думаю, это зависит от того, что делает ваша функция.

В этом случае, если вы ожидаете вызова API, я бы предложил использовать nock для имитации вызова API.

Это выглядело бы примерно так

test('Your Test', () => {
    const scope = nock(YOUR_URL).get(YOUR_ENDPOINT).reply(200);

    const product = render(<Product />);
    const divToClickAdd = await product.findByTestId('myDivWithOnClick');

    act(() => {
        fireEvent.click(divToClickAdd);
    });

    await waitFor(() => {
        expect(scope.isDone()).toBe(true);
    });
});

Если вы ожидаете каких-то изменений DOM, вы можете продолжить и это протестировать.

ИМО, интеграционные тесты должны быть сосредоточены на результатах действий пользователя, поэтому вместо того, чтобы беспокоиться о имитации конкретной функции, мы должны попытаться имитировать (или протестировать) конкретный результат указанной функции.