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

Question

[sergeyviktorovich]

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

let del = jest.fn();
    let openFormNewItemEdit = jest.fn();
    let setPin = jest.fn();
    let addDel = jest.fn();
    let deleteTaskItem = jest.fn();
    let getTime = jest.fn();
    let setColor = jest.fn();
    let props = {
        "data": {
            "name": "Мои заметки № 1",
            "text": "Мои заметки № 1",
            "time": 1636283818894,
            "key": "-Mnu6P7dMJTeVv8VESLh",
            "keychapter": "0"
        },
        "keychapter": "0",
        "keyitem": "-Mnu6P7dMJTeVv8VESLh",
        "index": 1,
        "attrdata": "all",
        "del": false,
    }
    const component = renderer.create(
        <TaskItem {...props} del={del} cbopenFormNewItemEdit={openFormNewItemEdit} cbsetPin={setPin}
            cbaddDel={addDel} cbdeleteTaskItem={deleteTaskItem} cbgetTime={getTime} cbsetColor={setColor} ></TaskItem>
    );
    let componentTree = component.toJSON();
    expect(componentTree).toMatchSnapshot();

Answer 1

[Владимир]

Да.
Если нужно проверить вызывается ли функция, мокаешь ее jest.fn а потом проверяешь была ли вызвана и скакими параметрами
https://jestjs.io/docs/expect#tohavebeencalled

Comments

[sergeyviktorovich]

а если

ничего не возращают эти функции? как вод эта например onAnimationEnd={this.props.cbdeleteTaskItem} и вот эта
в onClick={this.props.cbsetPin} ?
если написать специально под них функцию какую-то в тестах ,то смысл ее тестировать если она вызывает диспач к примеру ? Просто проверять что она вызывается?

render() {
        console.log("render TaskItem", this.props);
        return (
            <div className={`task-item`} data-keychapter={this.props.attrdata}
                style={{ "animationDelay": `* 0.05`, ...this.props.data.style }}
                data-key={this.props.keyitem}
                onAnimationEnd={this.props.cbdeleteTaskItem}
            >
                <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 ${this.props.data.pin === true ? "active" : ""}`} onClick={this.props.cbsetPin}>{icoPin(this.props.data.pin)}</span>
                        <span onClick={this.props.cbopenFormNewItemEdit} className="task-item__tools_Edit" >{icoEdit()}</span>
                        <span onClick={this.props.cbaddDel} className="task-item__tools_Trash">{icoTrash()}</span>
                        <span className="task-item__tools_Color">
                            <span className="task-item__tools_Color-list">
                                <span className="color" onClick={this.props.cbsetColor.bind(null, { "backgroundColor": "#fff4ba", "border": "1px solid #fbe67b" })} style={{ "backgroundColor": "#fff4ba", "border": "1px solid #fbe67b" }}></span>
                                <span className="color" onClick={this.props.cbsetColor.bind(null, { "backgroundColor": "#fff4ba", "border": "1px solid #fbe67b" })} style={{ "backgroundColor": "#e8fafc", "border": "1px solid #b2d9ec" }}></span>
                                <span className="color" onClick={this.props.cbsetColor.bind(null, { "backgroundColor": "#ffecf1", "border": "1px solid #f9c8ca" })} style={{ "backgroundColor": "#ffecf1", "border": "1px solid #f9c8ca" }}></span>
                                <span className="color dark" onClick={this.props.cbsetColor.bind(null, null)} style={{ "backgroundColor": "#3c3f43", "border": "1px solid #5f6368" }}></span>
                            </span>
                            {icoColor()}
                        </span>
                        <span className="task-item__date">{this.props.data.time !== undefined && this.props.cbgetTime(this.props.data.time)}</span>
                    </div>
                </div>
            </div >
        )
    }

[Владимир]

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

[sergeyviktorovich]

Владимир, я просто не доконца понимаю критерии тестирования ,если мне их надо создать снапшот ,то разве его можно отрендрить не передавая никаких функций или как правильно
const component = renderer.create(

<TaskItem {...props} del={del} cbopenFormNewItemEdit={openFormNewItemEdit} cbsetPin={setPin}
            cbaddDel={addDel} cbdeleteTaskItem={deleteTaskItem} cbgetTime={getTime} cbsetColor={setColor} ></TaskItem>
    );