Тестирование использования Dispach с шуткой

Question

Я пытаюсь проверить useDispach, используя шутку.

Это мой компонент ItemInput.js:

const ItemInput = ({ value, title, action, type, placeholder }) => {
    const dispatch = useDispatch();
    return (
        <div>
            <span data-cy="title">{title}</span>

            <Input
                type={type}
                value={value}
                onChange={e =>
                    dispatch({
                        type: action,
                        payload: { value: e.target.value }
                    })
                }
                placeholder={placeholder}
                data-cy={`item-input-${title}`}
            />
        </div>
    );
};

, а вот мой тест:

import React from 'react';
import { mount } from 'enzyme';
import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import ItemInput from '../ItemInput';

const mockStore = configureMockStore([thunk]);
const store = mockStore({});
const setup = () => {
    const props = {
        action: 'SET_NAME',
        value: 'test',
        title: 'title',
        type: 'text',
        placeholder: ''
    };

    const component = mount(
        <Provider store={store}>
            <ItemInput {...props} />
        </Provider>
    );

    const input = component.find(`[data-cy="item-input-${props.title}"]`).first();

    return {
        component,
        input,
        props
    };
};

describe('ItemInput', () => {
    it('should render correctly', () => {
        const { component } = setup();
        expect(component.find('ItemInput').exists()).toEqual(true);
    });

    it('should call dispach when typing', () => {
        const { input, props } = setup();
        store.dispatch = jest.fn();
        input.simulate('change', { target: { value: 'Jack' } });

        expect(store.dispatch).toHaveBeenCalledWith({
            type: props.action,
            payload: { value: 'Jack' }
        });
    });
});

ожидаемое поведение: dispatch вызывается с {type: props.action,payload: { value: 'Jack'}}.

, но получена ошибка:

expect(jest.fn()).toHaveBeenCalledWith(...expected)

Expected: {"payload": {"value": "Jack"}, "type": "SET_NAME"}

Number of calls: 0

  60 |         input.simulate('change', { target: { value: 'Jack' } });
  61 | 
> 62 |         expect(store.dispatch).toHaveBeenCalledWith({
     |                                ^
  63 |             type: props.action,
  64 |             payload: { value: 'Jack' }
  65 |         });

Я думаю, что с input.simulate('change', { target: { value: 'Jack' } }); есть какая-то проблема, связанная с Не вызывать функцию отправки.

Есть идеи, как я могу ее решить?

Answer 1

Отвечая на ваш вопрос , проблема заключается в том, что вы монтируете метод хранилища dispatch после монтирования компонента.

Это приводит к тому, что компонент монтируется с исходным значением store и ваш макет не учитывается.

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

it('should call dispatch when typing', () => {
    store.dispatch = jest.fn();
    const { input, props } = setup();
    input.simulate('change', { target: { value: 'Jack' } });

    expect(store.dispatch).toHaveBeenCalledWith({
        type: props.action,
        payload: { value: 'Jack' }
    });
});

В качестве альтернативного решения , поскольку вы уже используете библиотеку redux-mock-store, вы можете получить все действия, вызванные вызовом store.getActions. Итак, более чистый способ проверить, что действие было запущено:

it('should call dispatch when typing', function() {
    const { input, props } = setup();
    input.simulate('change', { target: { value: 'Jack' } });

    const actions = store.getActions();
    expect(actions).toEqual([{
        type: props.action,
        payload: { value: 'Jack' }
    }]);
});