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

Question

NovaNavigator

react

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

У меня есть следующий код мока для тестирования:

```javascript
jest.mock('../smeta_transport_costs', () => {
    return {
        __esModule: true,
        default: () => {
            return <div>Mocked SmetaTransportCostItem</div>;
        },
    };
});
```

Тест с проверкой:

```javascript
expect(screen.getByText('Mocked SmetaTransportCostItem')).toBeInTheDocument();
```

проходит успешно. Но когда я пытаюсь выполнить следующий тест:

```javascript
expect(SmetaTransportCostItem as jest.Mock).toHaveBeenCalledWith(
    expect.objectContaining({
        data: [
            {transportKind: 'Автобус', tripsQty: 2, peopleQty: 3, costPerTrip: 100, totalCost: 600, fromTo:"soch/adler",infoSrc:'site'},
        ],
        handleChangeSmeta: expect.any(Function),
        headers: expect.any(Array),
    }),
    {}
);
```

я получаю ошибку:

**Error: expect(received).toHaveBeenCalledWith(...expected)**

**Matcher error: received value must be a mock or spy function

Received has type:  function

Received has value: [Function default]**

Я не могу понять, в чем проблема, и пробовал разные способы создания мока. Можете помочь разобраться?

25 октября 2024 г. 18:43

Ответы на вопрос 1

Похожие вопросы

Answer 1

Ваша проблема заключается в том, что вы пытаетесь проверить, был ли вызван компонент `SmetaTransportCostItem` как мок-функция, но в действительности он определяется как обычный компонент, который возвращает JSX. Ваша реализация мока не создает функцию как мок, а просто заменяет компонент на функциональный компонент:

```javascript
default: () => {
    return <div>Mocked SmetaTransportCostItem</div>;
}
```

Для того чтобы `jest` мог отслеживать вызовы функции, вам нужно использовать `jest.fn()` для создания мока, который можно будет вызвать и проверить.

Вот как это можно сделать:

```javascript
jest.mock('../smeta_transport_costs', () => {
    return {
        __esModule: true,
        default: jest.fn(() => {
            return <div>Mocked SmetaTransportCostItem</div>;
        }),
    };
});
```

После этого `SmetaTransportCostItem` будет иметь все свойства мока, и ваш тест должен пройти.

Не забудьте также импортировать ваш мок правильно в тесте, а затем вы сможете использовать его следующим образом:

```javascript
import SmetaTransportCostItem from '../smeta_transport_costs';

// Ваш тест
it('должен проверять вызов компонента с правильными параметрами', () => {
    // ваш код, который вызывает SmetaTransportCostItem ...
    
    expect(SmetaTransportCostItem).toHaveBeenCalledWith(
        expect.objectContaining({
            data: [
                {transportKind: 'Автобус', tripsQty: 2, peopleQty: 3, costPerTrip: 100, totalCost: 600, fromTo:"soch/adler", infoSrc:'site'},
            ],
            handleChangeSmeta: expect.any(Function),
            headers: expect.any(Array),
        }),
        {}
    );
});
```

Теперь ваш тест, который проверяет вызов компонента с правильными параметрами, должен проходить.