Почему не работает simulate('change', { target: { value: 'test name' } })?

Кира, может реакт и jest тут работают с разным value ?

делаю так

component.find(".task-item-text").at(0).simulate('change', { target: { value: 'test text' } });
console.log(component.find(".task-item-name").at(0).value);
console.log
    undefined

Почему не работает simulate('change', { target: { value: 'test name' } })?

Кира, я скопировал из примера в документации где с тайтлом https://enzymejs.github.io/enzyme/docs/api/Shallow...
, а у меня только valuе вот у меня так ,но в инпуте же не обязательно должен быть атрибут ,чтобы установить в него значение

test('FormTaskItem New filds', () => {
        component.find(".task-item-name").at(0).simulate('change', { target: { value: 'test name' } });
        component.find(".task-item-text").at(0).simulate('change', { target: { value: 'test text' } });
        console.log(component.find(".task-item-name").at(0));
        const btn = component.find(".form-submit");
        btn.simulate('click');
        expect(actionsetNewTaskItem).toHaveBeenCalledWith({
            keychapter: "-Mnu71_BYp_test",
            title: 'test name',
            text: 'test text'
        }, dispatch);
    });

пробовал и так component.find(".task-item-name").at(0).value='test name' ,но была ошибка ,что объект не
расширяется

и в консоль лог почему не пойму не дом объект console.log(component.find(".task-item-name").at(0));
console.log
ShallowWrapper {}

Почему не работает simulate('change', { target: { value: 'test name' } })?

Кира, я на инпутах не прописал value , не могу понять его обязательно прописывать?
я же хочу не в атрибут прописать , а в инпут ,как объект
FormTaskItem New › FormTaskItem New filds
TypeError: Cannot read property 'value' of undefined

<input type="text" className="task-item-name" name="title" placeholder="Enter task item name" required="" ref={c => this.inputTaskItemName = c} />

ошибка когда хочу получить value через ref
this.inputTaskItemName.value,

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

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

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

Владимир, я разделил компоненты на компоненты представления и компоненты контейнеры
к в компонентах контейнерах все методы
и при 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');
    });


});

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

Владимир,

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

Как замокать функцию в jest с аргументами и ретурном?

в файле теста сделал так

jest.mock('../actions/TaskItem.js');
import {
    actionsetTaskItemPin
} from '../actions/TaskItem.js';
и перед рендрингом компонента так
actionsetTaskItemPin.mockImplementation((data, dispatch) => { return data; });


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

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

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

Почему не запускают тесты jest Jest encountered an unexpected token?

добавил

{
    "presets":[
        "@babel/preset-env",  "@babel/preset-react"
    ]
}

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

Владимир, вот в этот, она получает стили из 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] };
            });

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

Владимир, про моки понял . только не совсем понял,какая логика должна быть ,чтобы разделить мои функции на более простые ,и какая должна быть структура ,просто создать фаил 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);
        }
    }

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

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

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

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

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

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

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

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

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

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

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

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


Зачем в компоненте 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);
    }

Где найти актуальный package.json и package-lock.json для сборки react + webpack?

antares4045, а то было комментарии или что? такую сборку получил,учитель так и не дорассказал что это \\node_modules\\.bin\\

Где найти актуальный package.json и package-lock.json для сборки react + webpack?

а что это такое и зачем \\node_modules\\.bin\\ ?
"build": ".\\node_modules\\.bin\\webpack",
"livebuild": ".\\node_modules\\.bin\\webpack-dev-server --progress --colors"

Где найти актуальный package.json и package-lock.json для сборки react + webpack?

antares4045,еще раз спасибо