Советы при тестировании подключенного компонента Redux

Question

Я вставил свой компонент ниже, который очень, очень простой. Когда компонент монтируется, он будет в основном вызывать действие fetchMessage, которое возвращает сообщение от API. Это сообщение, в свою очередь, будет установлено как state.feature.message в функции mapStateToProps.

У меня полная потеря, где начать тестирование этого компонента. Я знаю, что я хочу, чтобы проверить, что:

1) Компонент Функции визуализируются

2) fetchMessage функции props называется

3) Он отображает или имеет правильную message свойства при визуализации с помощью что

Я попытался установить свой тестовый файл, как вы можете видеть ниже, но я просто закончил с повторяющейся ошибкой после ошибки со всем, что я пытаюсь.

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

import React, { Component, PropTypes } from 'react'; 
import { connect } from 'react-redux'; 
import * as actions from './actions'; 

class Feature extends Component { 
    static propTypes = { 
    fetchMessage: PropTypes.func.isRequired, 
    message: PropTypes.string 
    } 

    componentWillMount() { 
    this.props.fetchMessage(); 
    } 

    render() { 
    return (
     <div>{this.props.message}</div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { message: state.feature.message }; 
} 

export default connect(mapStateToProps, actions)(Feature); 

Тестовый файл:

import configureStore from 'redux-mock-store'; 
import thunk from 'redux-thunk'; 
import { Provider } from 'react-redux'; 
import expect from 'expect'; 
import { shallow, render, mount } from 'enzyme'; 
import React from 'react'; 
import sinon from 'sinon'; 

import Feature from '../index'; 

const mockStore = configureStore([thunk]); 

describe('<Feature />',() => { 
    let store; 

    beforeEach(() => { 
    store = mockStore({ 
     feature: { 
     message: 'This is the message' 
     } 
    }); 
    }); 

    it('renders a <Feature /> component and calls fetchMessage',() => { 
    const props = { 
     fetchMessage: sinon.spy() 
    }; 

    const wrapper = mount(
     <Provider store={store}> 
     <Feature {...props} /> 
     </Provider> 
    ); 

    expect(wrapper.find('Feature').length).toEqual(1); 
    expect(props.fetchMessage.calledOnce).toEqual(true); 
    }); 
}); 

Answer 1

Тестирование Connected Реагировать Компоненты

Использовать отдельный экспорт для подключенных и несвязанных версий компонентов.

Экспортировать несвязанный компонент как именованный экспорт и подключаться как экспорт по умолчанию.

import React, { Component, PropTypes } from 'react'; 
import { connect } from 'react-redux'; 
import * as actions from './actions'; 

// export the unwrapped component as a named export 
export class Feature extends Component { 
    static propTypes = { 
    fetchMessage: PropTypes.func.isRequired, 
    message: PropTypes.string 
    } 

    componentWillMount() { 
    this.props.fetchMessage(); 
    } 

    render() { 
    return (
     <div>{this.props.message}</div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { message: state.feature.message }; 
} 

// export the wrapped component as a default export 
export default connect(mapStateToProps, actions)(Feature); 

Запомнить подключенные компоненты должны быть обернуты в качестве компонента поставщика, как показано ниже.

В то время как несвязанные компоненты могут быть протестированы изолированно, поскольку им не нужно знать о магазине Redux.

Тестовый файл:

import configureStore from 'redux-mock-store'; 
import thunk from 'redux-thunk'; 
import { Provider } from 'react-redux'; 
import expect from 'expect'; 
import { shallow, render, mount } from 'enzyme'; 
import React from 'react'; 
import sinon from 'sinon'; 

// import both the wrapped and unwrapped versions of the component 
import ConnectedFeature, { feature as UnconnectedFeature } from '../index'; 

const mockStore = configureStore([thunk]); 

describe('<Feature />',() => { 
    let store; 

    beforeEach(() => { 
    store = mockStore({ 
     feature: { 
     message: 'This is the message' 
     } 
    }); 
    }); 

    it('renders a <Feature /> component and calls fetchMessage',() => { 
    const props = { 
     fetchMessage: sinon.spy() 
    }; 

    const wrapper = mount(
     <Provider store={store}> 
     <connectedFeature {...props} /> 
     </Provider> 
    ); 

    expect(wrapper.find('Feature').length).toEqual(1); 
    expect(props.fetchMessage.calledOnce).toEqual(true); 
    }); 
}); 

Answer 2

Вы можете использовать shallow() вместо mount(), чтобы проверить ваш компонент. Метод shallow() вызывает метод жизненного цикла componentWillMount(), поэтому нет причин использовать mount(). (Отказ от ответственности:. Я не совсем хорошо в mount() пока)

Для связных компонент, вы можете передать магазин объект вроде этого:

<connectedFeature {...props} store={store} /> 

И вы должны вызвать shallow() метод дважды, чтобы заставить его работать для подключенных компонентов:

const wrapper = shallow(<connectedFeature {...props} store={store} />).shallow()