модульное тестирование редукса Store.dispatch () - PullRequest
Новая
       19

модульное тестирование редукса Store.dispatch ()

0 голосов
/ 05 мая 2018

У меня есть базовый компонент реакции, подобный этому. 

import React from 'react';
import store from 'src/home/store';
class PageLoading extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            message: this.props.message
        };
    }

    componentDidMount(){
        store.dispatch({ type: 'SET_NOTIFICATION_DIALOG', status: '200', message: this.state.message, model: 'LOADING' });
    }

    render(){
        return(<div />);
    }
}


export default PageLoading;

как объединить этот компонент ..?

Я использую карму с энзимом. Я написал этот код ниже, но это не работает 

import configureMockStore from 'redux-mock-store';
import PageLoading from 'src/home/components/PageLoading';

const middlewares = [];
const mockStore = configureMockStore(middlewares);

Enzyme.configure({ adapter: new Adapter() });

describe("Page Loading",()=>{
    it("testing shoul dispatch action on calling componentdid mount",()=>{
        const initialState = {}
        const store = mockStore(initialState)
        const wrapper = mount(<PageLoading message="loading"/>);
         const actions = store.getActions();
        const expectedPayload = {type: 'SET_NOTIFICATION_DIALOG', status: '200', message:"loading", model: 'LOADING' };
         expect(actions).toEqual([expectedPayload])
    })
})

Я думаю, что это не магазин.

Ответы [ 2 ]

0 голосов
/ 05 мая 2018

Во-первых, вы должны указать магазин наверху вашего приложения. .

Используйте connect для подключения к магазину и введите dispatch в реквизиты компонента: 

import React from 'react';
import { connect } from 'react-redux';

class PageLoading extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            message: this.props.message
        };
    }

    componentDidMount(){
        this.props.dispatch({ type: 'SET_NOTIFICATION_DIALOG', status: '200', message: this.state.message, model: 'LOADING' });
    }

    render(){
        return(<div />);
    }
}

export default connect()(PageLoading);

В своем тесте вы можете заменить хранилище на подключенный компонент, передав его в качестве реквизита: 

describe("Page Loading",()=>{
    it("testing shoul dispatch action on calling componentdid mount",()=>{
        const initialState = {}
        const store = mockStore(initialState)
        const wrapper = mount(<PageLoading store={store} message="loading"/>);
         const actions = store.getActions();
        const expectedPayload = {type: 'SET_NOTIFICATION_DIALOG', status: '200', message:"loading", model: 'LOADING' };
         expect(actions).toEqual([expectedPayload])
    })
})
0 голосов
/ 05 мая 2018

Попробуйте с этим: 

it("testing shoul dispatch action on calling componentdid mount",()=>{
        const initialState = {}
        const store = mockStore(initialState)
        const wrapper = mount(<PageLoading message="loading"/>);
         const actions = store.getActions();
        const expectedPayload = {type: 'SET_NOTIFICATION_DIALOG', status: '200', message:"loading", model: 'LOADING' };
        spyOn(store, 'dispatch');

        expect(store.dispatch).toHaveBeenCalledWith([expectedPayload]);
    })

Если шпион в магазине не работает, попробуйте шпионить в mockedstore и mockedstore.dispatch

...