Как протестировать функцию в компоненте React c jest /react testing library?

Question

[GNG999]

Есть компонент

const SmetaAccomodationItem:FC<>=()=>{
..............
    const handleChangeRoadCosts = (id: number, keyVal: string, val: string) => {
        const newList = data.map((dataEl: any, index: number) => {
            if (id === index) {
                const dataObj = {
                    ...dataEl,
                    [keyVal]: val
                }
                let qty: number | undefined = undefined;
                let price: string | undefined = undefined;
                if (['inData','outData','peopleQty','costPerDay'].includes(keyVal) ) {
                    if (!val.trim()) {
                        qty = undefined
                        price = undefined
                    } else {
                        qty = parseInt(val)
                        price = keyVal === 'ticketQty' ? 'cost' : 'ticketQty'
                    }
                    dataObj.totalCost = !!(price && qty) ? (qty * parseInt(dataEl[price])).toString() : ''
                }
                return dataObj
            }
            return dataEl
        }) //тут не законченная логика, но в целом функция сводится к преобразованию некоторых полей внутри объекта 
    }

.......

    useEffect(() => {
.........

Как протестировать handleChangeRoadCosts именно на логику правильно ли преобразовывает объект ? Вынести в отдельный файл и тестировать через jest ? Вынести в хук и замокать хук и там уже тестировать ?

Answer 1

[Alexandroppolus]

Если там хитрая логика, то лучше вынести в отдельную функцию и к ней наколбасить тестов через чистый jest. Эта функция должна получать все данные, с которыми работает, через параметр. Например, твой handleChangeRoadCosts сейчас берет некую data из замыкания, а надо это передавать доп. параметром. Тогда ты легко напишешь тесты.

В самом компоненте остаётся обезжиренный вариант, не требующий тестов:

import {myFunc} from '....';

........
const handleChangeRoadCosts = (id: number, keyVal: string, val: string) => {
    return myFunc(id, keyVal, val, data);
};

Comments

[WbICHA]

Причём тут скорее лучше будет вынести не всю работу с массивом, а работу с элементом массива и в мапе уже нашу функцию передавать.

[GNG999]

WbICHA, Alexandroppolus получается нужно держать компоненты реакт максимально чистыми , те минимум функций с логикой и сайд эффектами, хотя бы для целей эффективного тестирования ? Например лучше скажем fetchSomeData=async()=>{
await fetch(...)
} не обьявлять внутри компонента а создавать где нить в другом файле скажем /api/someservice.js ?

[WbICHA]

GNG999, любой код стоит декомпозировать. В разумных пределах, конечно же.

[Kentavr16]

WbICHA, видел проект где все что больше 6 строк по правилам выносится в отдельную функцию. А если это не удается значит ты неправильно скомпонировал )