How to test functions with dispatch using jest?

Question

React

I can’t understand how to test, for example, such a function and how to write a test

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);