Как оттестировть функции с dispatch с помощью jest?

Question

[anriko]

не могу понять как оттестировать к примеру такую функцию и как написать тест

setColor = (e) => {
        debugger;
        let data = { style: e.target.getAttribute("style"), keychapter: this.state.keychapter, keyitem: this.state.keyitem };
        api.setTaskItemStyle(data, this.props.dispatch);
    }

"use strict";
import React from 'react';
import { connect } from 'react-redux';
import api from '../api/api.js';

class TaskItem extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            keychapter: this.props.keychapter,
            keyitem: this.props.keyitem,
        }
    }

    openFormNewItemEdit = () => {
        this.props.dispatch({ type: "OPEN_FORM_TASK_ITEM_EDIT", data: { name: this.props.data.name, text: this.props.data.text, activ: true, keychapter: this.props.keychapter, keyitem: this.props.keyitem } });

    }
    deleteTaskItem = () => {
        debugger;
        this.divitem.className = this.divitem.className + " del";
        setTimeout(() => {
            let data = { keychapter: this.state.keychapter, keyitem: this.state.keyitem };
            api.removeTaskItem(data, this.props.dispatch);
        }, 1000);
    }
    getTime(timestamp) {
        let d = new Date(timestamp);
        let timeStampCon = d.getDate() + '/' + (d.getMonth()) + '/' + d.getFullYear() + " " + d.getHours() + ':' + (d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes());
        return timeStampCon;
    }
    setColor = (e) => {
        debugger;
        let data = { style: e.target.getAttribute("style"), keychapter: this.state.keychapter, keyitem: this.state.keyitem };
        api.setTaskItemStyle(data, this.props.dispatch);
    }
    setPin = (ifo) => {
        let pin = true;
        if (ifo === true) pin = false;
        let data = { pin: pin, keychapter: this.state.keychapter, keyitem: this.state.keyitem };
        api.setTaskItemPin(data, this.props.dispatch);
    }
    CSSstring(string) {
        if (string) {
            const css_json = `{"${string
                .replace(/; /g, '", "')
                .replace(/: /g, '": "')
                .replace(";", "")}"}`;

            const obj = JSON.parse(css_json);

            const keyValues = Object.keys(obj).map((key) => {
                var camelCased = key.replace(/-[a-z]/g, (g) => g[1].toUpperCase());
                return { [camelCased]: obj[key] };
            });
            return Object.assign({}, ...keyValues);
        }
    }


    icoTrash = () => <svg className="ico-trash" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="trash" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" ></svg>;
    icoEdit = () => <svg className="ico-edit" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="pen" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" ></svg>;
    icoBell = () => <svg className="ico-bell" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bell" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" ></svg>;
    icoPin = () => <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="thumbtack" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" ></svg>;
    icoColor = () => <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="palette" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" ></svg>;

    render() {
        return (
            <div className={`task-item ${this.props.attrdata} ${this.props.data.style !== undefined ? "styled" : ""}`} data-keychapter={this.props.attrdata} style={{ "animationDelay": `${this.props.index * 0.05}s`, ...this.CSSstring(this.props.data.style) }} ref={c => this.divitem = c}
                data-key={this.props.keyitem}

            >
                <div className="task-item__title">{this.props.data.name}</div>
                <div className="task-item__text">{this.props.data.text}</div>
                <div className="task-item__footer">
                    <div className="task-item__tools">
                        <span className="task-item__tools_Pin" onClick={this.setPin}>{this.icoPin(this.props.data.pin)}</span>
                        <span onClick={this.openFormNewItemEdit} className="task-item__tools_Edit" >{this.icoEdit()}</span>
                        <span onClick={this.deleteTaskItem} className="task-item__tools_Trash">{this.icoTrash()}</span>
                        <span className="task-item__tools_Color">
                            <span className="task-item__tools_Color-list">
                                <span className="color" onClick={this.setColor} style={{ "backgroundColor": "#fff4ba", "border": "1px solid #fbe67b" }}></span>
                                <span className="color" onClick={this.setColor} style={{ "backgroundColor": "#e8fafc", "border": "1px solid #b2d9ec" }}></span>
                                <span className="color" onClick={this.setColor} style={{ "backgroundColor": "#ffecf1", "border": "1px solid #f9c8ca" }}></span>
                            </span>
                            {this.icoColor()}
                        </span>
                        <span className="task-item__date">{this.props.data.time !== undefined && this.getTime(this.props.data.time)}</span>
                    </div>
                </div>
            </div >
        )
    }


}

export default connect()(TaskItem);

Comments

[Владимир]

Какой то страшный код, просто ужас ужасный.
Зачем в компоненте setTimeout?
Почему не использовать redux_thunk для асинхроных функций
Зачем dispatch передавать в api?
Сделайте как в примере в документации
https://react-redux.js.org/tutorials/quick-start

замокайте dispatch и отслеживайте факт вызова.

[anriko]

Владимир,
код такой заметки


Зачем в компоненте setTimeout? не знал как сделать анимацию при удалении ,сделал ее на css
Почему не использовать redux_thunk, где его хотите применить ,передаю dispatch потому что в api идет запрос к базе после записываю в стейт результат ,

get(child(dbRef, "book")).then((snapshot) => {
    if (snapshot.exists()) {
      let book = { ...snapshot.val() };
      console.log("book", book);
      dispatch({ type: BOOK_LOAD_REQUEST, data: { book: book } });
    }
    else {
      console.log("no data found");
    }
  }).catch((error) => {
    console.log("unsaccessful error " + error);
  });
},

так зачем вызов тестировать если не видно ее результата ?
и что значит замокать ?
можно попросить вас на примере этой функции показать

setColor = (e) => {
        debugger;
        let data = { style: e.target.getAttribute("style"), keychapter: this.state.keychapter, keyitem: this.state.keyitem };
        api.setTaskItemStyle(data, this.props.dispatch);
    }

[Владимир]

anriko,
Визуальная часть отдельно, редюсер отдельно, екшены отдельно.
api.setTaskItemStyle должен вызываться из екшена
Анимация делается на css тут все правильно, но остальное делается на ref (https://reactjs.org/docs/react-api.html#refs)
https://developer.mozilla.org/en-US/docs/Web/API/H...
У в логике ты убиоаешь класс, потом вызываешь удаление, потом удаляешь элемент
ЧТо будет если АПИ выдаст ошибку и елемент не удалится ?
Нужно вызвать екшен, который установит состояние айтема как в процессе удаления, покажешь спинер, когда АПИ удалит, то вернешь состояние елемента как анимация удаления и в конце анимации может вызывать екшн - елемент удален, который просто удалит етот айтем из стора.

Замокать - https://jestjs.io/docs/mock-functions

Вот еще про анимацию
https://reactcommunity.org/react-transition-group/

[anriko]

Владимир, не совсем понял что сделал не так У в логике ты убиваешь класс, потом вызываешь удаление, потом удаляешь элемент

[anriko]

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

[Владимир]

https://www.robinwieruch.de/react-connected-compon...
Прям по шагам

[anriko]

Владимир, а можно все таки пример с одной из моих функций ,чтобы картинка ,как-то сложилась?

[anriko]

нашел вот такой вариант ,не знаю насколько он хорош обвернуть компонент в провайдер

[Владимир]

anriko, тебе по ходу лень читать документацию, извини не могу помочь.
В статье которую я тебе дал есть и как обернуть в провайдер, что ты правильно сделать и как добавить замоканый стор, и как замокать store.dispatch

В твоей функцции проблема для тестирования в том, что ты зависишь от реализации api.setTaskItemStyle так как передаешь туда и данные и dispatch и ждешь что диспатч будет вызван там, это геморно и не правильно. Ты не сможешь протестировать только функцию setColor

[anriko]

Владимир, читать не лень ,переварить сразу не могу все, так как распыляюсь на то или другое, а потом оказывается или не до спросил или недо сказли ,а читал и разбирался не в том ,и еще практиковал не то что решает проблему , и за-за недопонимания ,нового материала решаю не существующие проблеммы ,хотел увидеть код чтобы знать вот это написано без ошибок ,
а как мне переписать функцию setColor , не совсем понимаю и как переписать апи ?
я вызываю функцию в апи которая удаляет элемент , там пропис после вызывется функция которая из базы получает новые данные и обновляет стейт,что из этого можно опустить не понимаю,все равно придется вызывать ы в setColor,что дергает апи и меняет стейт, только как стейт поменяется если не передать диспач не пойму

[anriko]

Владимир, про моки понял . только не совсем понял,какая логика должна быть ,чтобы разделить мои функции на более простые ,и какая должна быть структура ,просто создать фаил action , и туда собрать все методы классов которые меняют стор ?

и куда размешать подобные функции которые просто делают из строки стилей объект

CSSstring(string) {
        if (string) {
            const css_json = `{"${string
                .replace(/; /g, '", "')
                .replace(/: /g, '": "')
                .replace(";", "")}"}`;

            const obj = JSON.parse(css_json);

            const keyValues = Object.keys(obj).map((key) => {
                var camelCased = key.replace(/-[a-z]/g, (g) => g[1].toUpperCase());
                return { [camelCased]: obj[key] };
            });
            return Object.assign({}, ...keyValues);
        }
    }

[Владимир]

anriko, В какой момент она делает из строки стилей объект?

[anriko]

Владимир, вот в этот, она получает стили из html атрибута , и их преобразовывает для html атрибута стилей реакт

или если спрашивайте синтаксически тут const obj = JSON.parse(css_json);
логически тут получается нудный объект

const keyValues = Object.keys(obj).map((key) => {
                var camelCased = key.replace(/-[a-z]/g, (g) => g[1].toUpperCase());
                return { [camelCased]: obj[key] };
            });

[Владимир]

anriko, ты задаешь вопросы уровня хорошего курса по React, я не уложусь тут тебе в коментариях как красиво писать код.
На самом деле если последовательно прочитать официальную доку по Реакту и Редакс тулкит https://redux-toolkit.js.org/ там полно примеров правильного кода, но можно пройти хороший курс типа
https://www.udemy.com/course/react-the-complete-gu... (если зарегистрировать аккаунт и подождать, этот курс можно и за 13 баксов купить, а иногда и за 9)
Что касается CSSstring , то она никак не зависит от инстанса компонента, она просто преобразует строку в объект, ее можно вынести в отдельный файл с функциями хелперами и просто каждый раз вызывать в рендере.

1) На пороге уже Реакт 18, сейчас все пишут на 17 и предпочтителен функциональный стиль.
Если писать на функциональных компонентах то для того, чтобы CSSstring не вызывалась если this.props.data.style не изменился, можно использовать хук useMemo

[Владимир]

Вот пример как работать с анимацией и где размещать работу с API
https://codesandbox.io/s/autumn-cherry-i0eh4?file=...

[anriko]

Владимир, а как добраться до инстанса вложенного в провайдер копонента?

[Владимир]

anriko, Перефразируй, не понял вопроса. Зачем тебе добираться, и что ты понимаешь под инстансом?

[anriko]

Владимир,

const component = mount(
        <Provider store={store}><TaskItemContainer dispatch={dispatch} data={props.data} keychapter="0" keyitem="-Mnu6P7dMJTeVv8VESLh3" key="-Mnu6P7dMJTeVv8VESLh3" index={1}
            attrdata={"all"}
        /></Provider>
    );
const instance = component.instance();

и если попробую вызвать любой метод компонента TaskItemContainer , но будет ошибка такого метода нету, как я понял его ищет в Provider

[Владимир]

anriko, Приведи пример метода. Я не могу понять зачем ты вызываешь метод, а не ивент, который его тригерит.

[anriko]

Владимир, я разделил компоненты на компоненты представления и компоненты контейнеры
к в компонентах контейнерах все методы
и при shallow рендринге все хорошо
а при глубоком рендринге mount и оберке Provider
до методов добраться не могу

"use strict";
import React from 'react';
import { TaskItemContainer } from '../components/TaskItemContainer.js';
jest.mock('../actions/TaskItem.js');
import {
    actionopenFormNewItemEdit,
    actionremoveTaskItem,
    actionsetTaskItemStyle,
    actionsetTaskItemPin
} from '../actions/TaskItem.js';

describe('TaskItemContainer', () => {
    let props = {
        data: {
            name: "Мои заметки № 1",
            text: "Мои заметки № 1",
            time: 1636283818894,
            key: "-Mnu6P7dMJTeVv8VESLh3",
            keychapter: "0"
        },
        keychapter: "0",
        keyitem: "-Mnu6P7dMJTeVv8VESLh3",
        index: 1,
        attrdata: "all",
        del: false,
    }

    let dispatch = jest.fn();

    // actionopenFormNewItemEdit.mockReturnValue(data);
    actionopenFormNewItemEdit.mockImplementation((data, dispatch) => { return data; });
    actionsetTaskItemStyle.mockImplementation((data, dispatch) => { return data; });

    const component = shallow(
        <TaskItemContainer dispatch={dispatch} data={props.data} keychapter="0" keyitem="-Mnu6P7dMJTeVv8VESLh3" key="-Mnu6P7dMJTeVv8VESLh3" index={1}
            attrdata={"all"}
        />
    );
    const instance = component.instance();

    test('TaskItemContainer openFormNewItemEdit', () => {
        instance.openFormNewItemEdit();
        expect(actionopenFormNewItemEdit).toHaveBeenCalledWith({
            name: 'Мои заметки № 1',
            text: 'Мои заметки № 1',
            activ: true,
            keychapter: '0',
            keyitem: '-Mnu6P7dMJTeVv8VESLh3'
        }, dispatch
        );
    });

    test('TaskItemContainer addDel', () => {
        instance.addDel();
        expect(component.state().del).toBeTruthy();
    });

    test('TaskItemContainer  setColor', () => {
        instance.setColor({ "backgroundColor": "#fff4ba", "border": "1px solid #fbe67b" });
        expect(actionsetTaskItemStyle).toHaveBeenCalledWith({
            style: { "backgroundColor": "#fff4ba", "border": "1px solid #fbe67b" },
            keychapter: '0',
            keyitem: '-Mnu6P7dMJTeVv8VESLh3'
        }, dispatch
        );
    });

    test('TaskItemContainer  setPin', () => {
        instance.setPin(true);
        expect(actionsetTaskItemPin).toHaveBeenCalledWith({
            pin: false,
            keychapter: '0',
            keyitem: '-Mnu6P7dMJTeVv8VESLh3'
        }, dispatch
        );
    });

    test('TaskItemContainer getTime', () => {
        instance.getTime(1636283818894);
        expect(instance.getTime(1636283818894)).toBe('7/10/2021 14:16');
    });


});

[anriko]

и при shallow рендринге компоненты списка выглядят вот так <Connect(TaskItemContainer)/>, но как их найти не знаю
так не работает component.find(TaskItemContainer);