Redux: किसी प्रदाता में लिपटे कंटेनरों का संदर्भ नहीं दे सकते या एंजाइम के साथ जुड़ सकते हैं

न तो connect() और न ही Provider इस पुस्तकालय का हिस्सा हैं। ऐसे मुद्दों पर चर्चा करना और उन्हें ट्रैक करना आसान होता है जब उन्हें इसके बजाय उपयुक्त भंडार में दर्ज किया जाता है: https://github.com/reactjs/react-redux।

मुझे लगता है कि वास्तव में समझ में आता है। चूंकि आप उथले-प्रतिपादन कर रहे हैं, केवल प्रदाता घटक प्रदान किया जाएगा - आपका कंटेनर कॉम्पोनेंट केवल अपने ऑब्जेक्ट आउटपुट फॉर्म में छोड़ा जाएगा या जो कुछ भी उथला प्रतिपादन उत्पन्न करता है।

यहाँ दो विचार:

सबसे पहले, ध्यान दें कि connect() द्वारा उत्पन्न रैपर घटक वास्तव में props.store की तलाश करता है इससे पहले कि वह context.store की तलाश करे, इसलिए यदि आपको वास्तव में ऐसा लगता है कि आपको एक कनेक्टेड घटक का परीक्षण करने की आवश्यकता है , आपको प्रदाता या संदर्भ या किसी भी चीज़ के बारे में चिंता किए बिना <ConnectedComponent store={myTestStore} /> प्रस्तुत करने में सक्षम होना चाहिए।

दूसरा सवाल यह है कि क्या आपको वास्तव में पूरी तरह से जुड़े घटक के परीक्षण के बारे में चिंता करने की ज़रूरत है। मैंने जो तर्क देखा है, वह यह है कि यदि आप विशिष्ट प्रॉप्स के साथ अपने "सादे" घटक का परीक्षण कर सकते हैं, और आप अपने mapStateToProps कार्यान्वयन का परीक्षण कर सकते हैं, तो आप सुरक्षित रूप से मान सकते हैं कि प्रतिक्रिया-रेडक्स उन्हें सही ढंग से एक साथ रखेगा, और वास्तव में कनेक्टेड संस्करण का परीक्षण करने की आवश्यकता नहीं है।

@gaearon आप सही कह रहे हैं, क्षमा करें। यह नहीं पता था कि इसे प्रतिक्रिया या एंजाइम रेपो में बढ़ाना है या नहीं।

@markerikson स्मार्ट घटक का परीक्षण करने का कारण mapToDispatchProps के लिए है जहां मैं यह सुनिश्चित करना चाहता था कि लिपटे घटक द्वारा सही प्रेषक को बुलाया गया था। बस स्टोर को ConnectedComponent में पास करने का मतलब है कि मैं राज्य मैपिंग या प्रेषण कॉलबैक फ़ंक्शंस का परीक्षण नहीं करूँगा।

मैं इसके बारे में और सोचूंगा और जरूरत पड़ने पर संबंधित रेपो में एक मुद्दा उठाऊंगा। सहायता के लिए धन्यवाद।

@ मोर्ड्रा : जब आप कहते हैं "सही प्रेषक को बुलाया गया था", क्या आपका वास्तव में "सही कार्रवाई निर्माता" है?

आप ऐसा कुछ कर सकते हैं (वाक्यविन्यास शायद बंद है, लेकिन आपको यह विचार मिलना चाहिए):

let actionSpy = sinon.spy();

let wrapper = shallow(<PlainComponent someActionProp={actionSpy} />);
wrapper.find(".triggerActionButton").simulate("click");
expect(actionSpy.calledOnce).to.be.true;
expect(actionSpy.calledWith({type : ACTION_I_WAS_EXPECTING)).to.be.true;

दूसरे शब्दों में, अपने सादे घटक को प्रस्तुत करें, उन प्रॉप्स के लिए जासूसों में पास करें जो mapDispatch से लौटाए गए कार्य होते, और घटक को उन क्रियाओं को कॉल करने के लिए जो भी व्यवहार की आवश्यकता होती है उसे ट्रिगर करें।

इसके अलावा, मेरी पिछली टिप्पणी के अनुसार: आपको अपने mapStateToProps और mapDispatchToProps को अलग-अलग परीक्षण करने में सक्षम होना चाहिए, और सुरक्षित महसूस करना चाहिए कि रिएक्ट-रेडक्स कनेक्टेड संस्करण का परीक्षण करने की कोशिश किए बिना उन्हें उचित रूप से कॉल करेगा। स्वयं सत्यापित करने के लिए कि मामला है।

@markerikson मैं वह नहीं कर सकता जो आप सुझा रहे हैं क्योंकि मेरे PlainComponent को क्रियाओं या एक्शन क्रिएटर्स के बारे में पता नहीं है। मुझे नहीं पता कि यह करने का यह सही तरीका है, लेकिन यदि आप देखें:
https://github.com/mordra/cotwmtor/blob/master/client/charCreation/charCreation.jsx
आप देखेंगे कि मेरे mapDispatchToProps में सभी तर्क हैं:

const mapDispatchToProps = (dispatch) => {
  return {
    onCompleted      : (player) => {
      Meteor.call('newGame', player, function (data) {
        console.log('new game return: ' + data);
      });
      dispatch(routeActions.push('/game'));
      dispatch({type: "INIT_GAME", map: generateAreas(), buildings: generateBuildings(dispatch)});
    },
    onCancelled      : () => dispatch(routeActions.push('/')),
    onChangeName     : input => dispatch(actions.changeName(input)),
    onChangeGender   : gender => dispatch(actions.setGender(gender)),
    onSetDifficulty  : lvl => dispatch(actions.setDifficulty(lvl)),
    onChangeAttribute: (attr, val) => dispatch(actions.setAttribute(attr, val))
  }
};

इसलिए यदि मैं प्लेनकंपोनेंट में पारित प्रॉप्स पर जासूसी करता हूं, तो मैं यह परीक्षण नहीं कर पाऊंगा कि क्या सही क्रियाएं कहलाती हैं, बल्कि, केवल एक्शन क्रिएटर्स को दिए गए पैरामीटर सही हैं।
फिर मुझे अलग से connect घटक का परीक्षण करना होगा।

आह। इससे मुझे और समझने में मदद मिलती है।

तो इस चेतावनी के साथ कि मेरे पास वास्तव में परीक्षण लिखने का बहुत कम व्यावहारिक अनुभव है, कुछ विचार:

• आपके पास वास्तव में एक्शन निर्माता हैं, उन्हें अलग से परिभाषित नहीं किया गया है क्योंकि आप dispatch तक पहुंच चाहते हैं। यह अपने आप में बहुत आसानी से परीक्षण योग्य नहीं है। आप शायद उनके व्यवहार का भी परीक्षण करने में सक्षम होना चाहते हैं, और ऐसा करने के लिए आप उन्हें mapDispatch के बाहर अपने स्वयं के कार्यों के रूप में परिभाषित करना चाहते हैं।
• वे सभी रेडक्स-थंक के उपयोग के लिए बहुत अच्छे उम्मीदवारों की तरह दिखते हैं, जो निश्चित रूप से इन कार्यों को स्वयं परिभाषित करना आसान बनाता है और उन्हें dispatch तक पहुंचने की अनुमति देता है।
• आपका PlainComponent _does_ "कार्रवाइयां" या इस मामले में कम से कम कॉलबैक के बारे में जानता है, जिसमें आप उन्हें पास कर रहे हैं, और कहीं आपके घटक में आप this.props.onSetDifficulty("HARD") या ऐसा कुछ चला रहे हैं। जब मैंने कार्रवाई के लिए जासूसों में जाने का सुझाव दिया, तो मैं इस तरह की चीज को बदलने का सुझाव दे रहा था। इसलिए, यदि आप onSetDifficulty के लिए एक जासूस में पास हुए हैं, तो आप सत्यापित कर सकते हैं कि आपके घटक ने इसे बुलाया, और कठिनाई स्तर के लिए स्वीकार्य मूल्य में पारित किया।

अंततः, मुझे लगता है कि आप mapDispatch में परिभाषित उन कार्यों को लेकर चीजों को और अधिक परीक्षण योग्य बनाने में सक्षम होना चाहिए, और उन्हें अलग से परिभाषित करना चाहिए। फिर आपको अपने घटक का ठीक से परीक्षण करने के लिए mapDispatch को जोड़ने के बारे में चिंता करने की ज़रूरत नहीं होगी, और इस बात पर ध्यान केंद्रित कर सकते हैं कि घटक को सही तर्क या कुछ के साथ दिए गए प्रोप कॉलबैक कहा जाता है या नहीं।

साथ ही, घटक के दृष्टिकोण से: अंततः यह वास्तव में इस बारे में चिंतित नहीं है कि {action: CHANGE_NAME, name : "Fred"} भेजा गया है या नहीं। यह केवल इतना जानता है कि इसे this.props.onChangeName("Fred") कहा जाता है, और _that_ वह है जिसे आपको परीक्षण करने का प्रयास करना चाहिए - कि इसे प्रोप कॉलबैक सही तरीके से कहा जाता है।

@mordra आपके मामले में, मैं mapDispatchToProps निर्यात करूंगा और इसे अलगाव में परीक्षण करूंगा। आप सत्यापित कर सकते हैं कि संपत्ति के नाम सभी सही हैं और अपने एक्शन क्रिएटर्स का परीक्षण करने के लिए डिस्पैच के लिए एक जासूस पास करें।

उस ने कहा, मैं mapDispatchToProps को mapActionCreatorsToProps के पक्ष में छोड़ देता हूं जो पहले से गठित एक्शन क्रिएटर्स को मैप करता है जिन्हें मैं अलगाव में आसानी से परीक्षण कर सकता हूं। उस स्थिति में मैं सिर्फ यह परीक्षण करता हूं कि मेरे सभी प्रॉप्स को आयात टाइपो से बचाने के लिए परिभाषित किया गया है।

अंत में ध्यान दें कि आप सामान्य (उथले नहीं) प्रतिपादन का उपयोग कर सकते हैं। इसके लिए आपको या तो jsdom या एक वास्तविक ब्राउज़र की आवश्यकता होगी, लेकिन फिर आप किसी भी स्तर को गहराई से प्रस्तुत कर सकते हैं।

यह नहीं पता था कि इसे प्रतिक्रिया या एंजाइम रेपो में बढ़ाना है या नहीं

क्षमा करें, मेरा मतलब रिएक्ट या एंजाइम रेपो से नहीं था। मेरा मतलब रिएक्ट रेडक्स था जो कि वह पुस्तकालय है जिसका आप उपयोग कर रहे हैं।

मदद के लिए धन्यवाद दोस्तों, मेरे लिए जाने और पचाने के लिए यह बहुत सारी जानकारी है। @markerikson @fshowalter मैंने कुछ और देखा और मैपस्टेट/डिस्पैच को निर्यात करने और उन्हें अलग से परीक्षण करने का आपका सुझाव लेगा, अपेक्षित कार्यों को उत्पन्न करने वाले कॉलबैक का परीक्षण करना समझ में आता है।

@gaearon स्टेटलेस घटक उथले के बिना प्रस्तुत नहीं करता है और केवल मुद्दों को स्किमिंग करता है, ऐसा लगता है कि स्टेटफुल घटकों को प्रस्तुत करने में समस्याएं आती हैं जिनमें स्टेटलेस घटक होते हैं इसलिए मैंने अभी के लिए उस पथ से बचने के लिए एक मानसिक नोट बनाया है।

मुझे यकीन नहीं है कि आप किन मुद्दों का जिक्र कर रहे हैं। आप कार्यात्मक घटकों के साथ उथले प्रतिपादन का उपयोग कर सकते हैं। उथला प्रतिपादन केवल एक स्तर गहरा काम करता है (इससे कोई फर्क नहीं पड़ता कि घटक कैसे परिभाषित किया गया है)। यह इसकी मुख्य विशेषता है - इसकी पुनरावृत्ति नहीं होती है इसलिए घटक परीक्षण स्वतंत्र रहते हैं। यदि आपके पास उथले प्रतिपादन के साथ विशिष्ट समस्याएं हैं जिन्हें आप पुन: उत्पन्न कर सकते हैं तो कृपया रिएक्ट रेपो के खिलाफ बग दर्ज करें। धन्यवाद!

@gaearon : तो स्पष्ट करने के लिए, अगर मैं ऐसा करता हूं:

let wrapper = shallow(<A><B /></A>);

बी प्रदान किया जाएगा, या नहीं? क्योंकि मुझे लगता है कि मूल प्रश्न यही था - कनेक्शन का परीक्षण करने के लिए एक कनेक्टेड घटक के आसपास <Provider> प्रस्तुत करने का प्रयास कर रहा था।

भले ही यह सीधे Redux से संबंधित नहीं है। मैंने इसे फिर से कंटेनर पर shallow() पर कॉल करके हल किया। यह आंतरिक घटक को स्टोर स्थिति के साथ प्रस्तुत करता है।

उदाहरण:

import React from 'react';
import {expect} from 'chai';
import {shallow} from 'enzyme';
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import events from 'events';

const mockStore = configureMockStore([ thunk ]);
const storeStateMock = {
  myReducer:{
    someState: 'ABC'
  }
};

let store;
let component;
describe('tests for MyContainerComponent', () => {
  beforeEach(() => {
    store = mockStore(storeStateMock);
    component = shallow(<MyContainerComponent store={store} />).shallow();
  });

  it('renders container', () => {
    expect(component.find('div.somediv')).to.have.length.of(1);
  });
  ...
});

उम्मीद है की यह मदद करेगा

क्या हमें शायद एक कस्टम मॉड्यूल के माध्यम से ऐसा करने के लिए एक और अधिक सुलभ तरीका बनाना चाहिए?

संपादित करें: इसलिए हम कनेक्ट को एंजाइम के लिए एक विधि के रूप में घोषित कर सकते हैं, जैसे component = shallowWithConnect()

@ ev1stensberg यह एक अच्छा विचार है। क्या हमने तय किया है कि क्या यही तरीका है और/या इस पर काम शुरू हो गया है? यदि नहीं, तो मुझे योगदान देना अच्छा लगेगा।

भविष्य में इस मुद्दे पर ठोकर खाने वाले किसी भी व्यक्ति के लिए, यह मेरे लिए काम करने वाला दृष्टिकोण है: केवल सादे घटक का परीक्षण करें। घटक परिभाषा को नामित निर्यात के रूप में निर्यात करें और कनेक्टेड घटक (आपके ऐप में उपयोग के लिए) को डिफ़ॉल्ट निर्यात के रूप में निर्यात करें। मूल प्रश्न से कोड पर वापस जा रहे हैं:

// test
let component = shallow(<Provider store={store}><ContainerComponent /></Provider>);
component.find('#abc'); // returns null

let component = shallow(<Provider store={store}><div id="abc"></div></Provider>);
component.find('#abc'); // returns the div node

// ContainerComponent
export const Component = ({...}) => (<div id="abc"></div>); // I EXPORT THIS, TOO, JUST FOR TESTING
export default connect(..., ...)(Component);

तो बस करो

const component = shallow(<Component {...props} />)
// test component

और जैसा कि अन्य ने ऊपर बताया है, यदि आपके पास उन कार्यों के लिए भी कवरेज है जिन्हें आप कनेक्ट करते हैं, तो आपके पास समग्र रूप से आपके घटक के लिए पूर्ण कवरेज होना चाहिए।

खैर, यहाँ ध्यान देने वाली पहली बात है का दर्शन :

1. स्टोर से ए . तक राज्य का संचार करें
2. के आधार पर प्रेषण कार्रवाइयों के माध्यम से राज्य को संशोधित करें आयोजन।

अगर मैं ठीक हूं तो आपको केवल 2 चीजों का परीक्षण करना होगा:

1. क्या आपका घटक राज्य से उत्पन्न सही प्रॉप्स प्राप्त कर रहा है (चयनकर्ताओं के माध्यम से हो सकता है)?
2. क्या आपका घटक सही कार्रवाइयां भेज रहा है?

तो यह मेरा दृष्टिकोण है

import React from 'react';
import { shallow } from 'enzyme';
import { fromJS } from 'immutable';
import { createStore } from 'redux';
// this is the <Map /> container
import Map from '../index';
// this is an action handled by a reducer
import { mSetRegion } from '../reducer';
// this is an action handled by a saga
import { sNewChan } from '../sagas';
// this is the component wrapped by the <Map /> container
import MapComponent from '../../../components/Map';

const region = {
  latitude: 20.1449858,
  longitude: -16.8884463,
  latitudeDelta: 0.0222,
  longitudeDelta: 0.0321,
};
const otherRegion = {
  latitude: 21.1449858,
  longitude: -12.8884463,
  latitudeDelta: 1.0222,
  longitudeDelta: 2.0321,
};
const coordinate = {
  latitude: 31.788,
  longitude: -102.43,
};
const marker1 = {
  coordinate,
};
const markers = [marker1];
const mapState = fromJS({
  region,
  markers,
});
const initialState = {
  map: mapState,
};
// we are not testing the reducer, so it's ok to have a do-nothing reducer
const reducer = state => state;
// just a mock
const dispatch = jest.fn();
// this is how i mock the dispatch method
const store = {
  ...createStore(reducer, initialState),
  dispatch,
};
const wrapper = shallow(
  <Map store={store} />,
);
const component = wrapper.find(MapComponent);

describe('<Map />', () => {
  it('should render', () => {
    expect(wrapper).toBeTruthy();
  });

  it('should pass the region as prop', () => {
    expect(component.props().region).toEqual(region);
  });

  it('should pass the markers as prop', () => {
    expect(component.props().markers).toEqual(markers);
  });
  // a signal is an action wich will be handled by a saga
  it('should dispatch an newChan signal', () => {
    component.simulate('longPress', { nativeEvent: { coordinate } });
    expect(dispatch.mock.calls.length).toBe(1);
    expect(dispatch.mock.calls[0][0]).toEqual(sNewChan(coordinate));
  });
  // a message is an action wich will be handled by a reducer
  it('should dispatch a setRegion message', () => {
    component.simulate('regionChange', otherRegion);
    expect(dispatch.mock.calls.length).toBe(2);
    expect(dispatch.mock.calls[1][0]).toEqual(mSetRegion(otherRegion));
  });
});

@markerikson से आपका क्या मतलब था:

आप अपने mapStateToProps कार्यान्वयन का परीक्षण कर सकते हैं

मान लें कि आप कनेक्टेड कंटेनर को ES6 निर्यात के माध्यम से निर्यात कर रहे हैं। आपके पास निजी mapStateToProps तक पहुंच नहीं होगी। क्या आप किसी अन्य तरीके से बात कर रहे थे या आप विशिष्ट हो सकते हैं?

@mordrax

आप सत्यापित कर सकते हैं कि संपत्ति के नाम सभी सही हैं

इसलिए यदि आप अपने mapStateToProps का पर्दाफाश करते हैं और इसे सार्वजनिक करते हैं, तो कहें कि आप अपने कंटेनर कॉम्पोनेंट को अपने परीक्षण से प्रस्तुत करते हैं जिसमें नकली स्टोर भेजना और राज्य प्रोप में भेजना शामिल है, तो आपका mapStateToProps उस राज्य को प्राप्त करता है, इसे एक प्रोप पर मैप करता है। लेकिन फिर आप उस बिंदु से इसका परीक्षण कैसे कर सकते हैं? कनेक्ट मैपस्टेटटॉपप्रॉप्स को कॉल करेगा, इस प्रकार प्रॉप्स को मर्ज कर रहा है, लेकिन सीम कहां है और उस प्रक्रिया/प्रवाह के दौरान कोड में सीम कौन सा बिंदु है जहां आप प्रेजेंटेशनल कंपोनेंट पर सेट किए जा रहे प्रॉप्स को इंटरसेप्ट कर सकते हैं? मुझे लगता है कि @ guatedude2 की तरह डबल उथलेपन बिना किसी सीम के मैप किए गए प्रॉप्स की जांच करने का एक तरीका हो सकता है ...

अपने उथले.उथले पर भी। तो कनेक्ट () घटक क्या वापस गुजरता है, एक रैपर सही? और वह आवरण जो प्रस्तुतीकरण घटक को लपेटता है?

@granmoe क्या आप इसे और अधिक विस्तार से समझा सकते हैं कि आपका क्या मतलब है:

यदि आपके पास उन कार्यों के लिए भी कवरेज है जिन्हें आप कनेक्ट में पास करते हैं, तो आपके पास समग्र रूप से अपने घटक के लिए पूर्ण कवरेज होना चाहिए।

मैं _what_ के संदर्भ में @tugorez के साथ भी हूं और मैं परीक्षण करना चाहता हूं और क्यों।

@markerikson जासूस के साथ इतना अच्छा उदाहरण। यह एक चीज है जिसे आप परीक्षण कर सकते हैं, लेकिन आपको "व्यवहार की इकाई" का परीक्षण करने के लिए वहां और अधिक आश्वासन देने की आवश्यकता होगी। बस यह परीक्षण करना कि mapDispatchToProps से एक जासूसी कार्रवाई को बुलाया गया था, वास्तव में हमें कंटेनर घटक के बारे में पूरी कहानी नहीं बताता है। यह आपके कंटेनर के हैंडलर लॉजिक के आधार पर अपेक्षित परिणाम पर जोर नहीं देता है।

यह परीक्षण करने के लिए पर्याप्त नहीं है कि आपने प्रॉप्स या स्टेट पास कर लिया है, आप कंटेनर घटक के व्यवहार का परीक्षण करना चाहते हैं। इसका मतलब है कि दो चीजों का परीक्षण करना:

1) क्या कंटेनर कंपोनेंट ने प्रॉप्स को प्रेजेंटेशनल कंपोनेंट के लिए वायर किया और अगर ऐसा किया, तो क्या कोई निश्चित स्थिति है, मुझे उम्मीद है कि प्रेजेंटेशनल कंपोनेंट को एक बार प्रेजेंटेशनल कंपोनेंट के प्रॉप्स द्वारा पारित उस विशिष्ट स्टेट के आधार पर रेंडर किया जाएगा। कौन जानता है, शायद कुछ गूंगा डेवलपर साथ आता है और mapStateToProps में और कोड जोड़ता है, आप हमेशा भरोसा नहीं कर सकते कि यह चीजों को ठीक से मैप करेगा, यह परीक्षण कंटेनर तर्क का बिंदु है। जबकि mapStateToProps में वास्तव में कोई तर्क नहीं है, जो फिर से जानता है कि कुछ डेवलपर साथ आते हैं और वहां एक कथन का विज्ञापन करते हैं ... ठीक है यह व्यवहार है जो चीजों को गड़बड़ कर सकता है।

2) प्रेषण हैंडलर तर्क (व्यवहार) कंटेनर में काम करता है।

@dschinkel :

Redux से जुड़े घटकों को परिभाषित करने के लिए विशिष्ट अभ्यास है export default connect()(MyComponent) , और एक नामित निर्यात के रूप में export MyComponent भी। इसी तरह, क्योंकि mapState सिर्फ एक फ़ंक्शन है, आप export const mapState = () => {} भी कर सकते हैं, और फिर इसे अलग से आयात और परीक्षण कर सकते हैं।

"कंटेनर घटक" बनाम "प्रस्तुतिकरण घटक" के परीक्षण के लिए: यहां सामान्य विचार यह है कि आपको अधिकांश भाग के लिए कंटेनर के परीक्षण के बारे में चिंतित होने की आवश्यकता नहीं है, जहां "कंटेनर" === "आउटपुट connect ". रिएक्ट-रेडक्स के पास पहले से ही एक पूर्ण परीक्षण सूट है कि उसे कैसे व्यवहार करना चाहिए, और आपके लिए उस प्रयास को डुप्लिकेट करने का कोई कारण नहीं है। हम जानते हैं कि यह स्टोर की सदस्यता लेने, mapState और mapDispatch पर कॉल करने और रैप किए गए घटक को प्रॉप्स पास करने का सही ढंग से संचालन करता है।

पुस्तकालय के उपभोक्ता के रूप में _you_ की रुचि इस बात में होगी कि _your_ घटक कैसे व्यवहार करता है। यह वास्तव में मायने नहीं रखता है कि आपके अपने घटक को connect रैपर, एक परीक्षण, या कुछ और से सहारा मिल रहा है या नहीं - यह सिर्फ उस घटक का व्यवहार करता है जो प्रोप के एक निश्चित सेट को दिया जाता है।

(इसके अलावा, एफडब्ल्यूआईडब्ल्यू, मुझे एहसास है कि आप पूरी तरह से परीक्षण के विशेषज्ञ हैं और मैं नहीं हूं, लेकिन ऐसा लगता है कि आप चीजों के बारे में थोड़ा पागल हो रहे हैं :) यदि आप mapState होने के बारे में चिंतित हैं गलती से टूट गया, फिर इसके लिए परीक्षण लिखें और आगे बढ़ें।)

अब, यदि आपका लपेटा हुआ घटक इसके अंदर अन्य जुड़े घटकों को प्रस्तुत करता है, और विशेष रूप से यदि आप उथले प्रतिपादन के बजाय पूर्ण प्रतिपादन कर रहे हैं, तो const wrapper = mount(<Provider store={testStore}><MyConnectedComponent /></Provider> करके चीजों का परीक्षण करना बहुत आसान हो सकता है। लेकिन, कुल मिलाकर, मेरा मानना ​​है कि अधिकांश समय आप अपने mapState फ़ंक्शन और "सादे" घटक का अलग-अलग परीक्षण करने में सक्षम होते हैं, और आपको वास्तव में केवल सत्यापित करने के लिए कनेक्टेड संस्करण का परीक्षण करने की कोशिश नहीं करनी चाहिए कि mapState का आउटपुट सादे घटक को दिया जा रहा है।

संदर्भ के लिए, आप connect के लघु संस्करण को देखना चाह सकते हैं जिसे डैन ने कुछ समय पहले लिखा था कि यह आंतरिक रूप से क्या करता है: https://gist.github.com/gaearon/1d19088790e70ac32ea636c025ba424e ।

हाँ, मेरा मतलब है कि यदि आप mapStateToProps और dispatchStateToProps निर्यात करते हैं, तो यह बेहतर होगा। मैं परीक्षण नहीं करना चाहता कि कनेक्ट() (मेरे परीक्षण में सहयोगी) काम करता है, निश्चित रूप से नहीं। तो यह करने का एक स्पष्ट तरीका होगा, उन दो विधियों को निर्यात करें:

उदाहरण-कंटेनर-spec.js

describe('testing mapPropsToState directly', () => {
    it.only('returns expected state', () => {
        const state = {firstName: 'Dave'};
        const output = mapStateToProps(state);

        expect(output.firstName).to.equal('Dave');
    });
});

पात्र

import React from 'react';
import { connect } from 'react-redux'
import Example from './Example';

export const mapStateToProps = (state) => ({
    firstName: state.firstName
})

export default connect(mapStateToProps)(Example);

प्रस्तुतीकरण

import React, { Component } from 'react';

export default class Example extends Component {
    render(){
        return (
            <div className='example'>
                {this.props.firstName}
            </div>
        )
    }
}

फिर फिर, आप _sallow_ प्रतिपादन के साथ ऐसा कुछ भी कर सकते हैं और अभी भी बाल घटक में गोता लगा सकते हैं:

उदाहरण-कंटेनर-spec.js

it('persists firstName to presentation component', () => {
        var state = {firstName: "Dave"};
        const container = mount(<ExampleContainer store={fakeStore(state)}/>),
            example = container.find(Example);

        expect(example.length).to.equal(1);
        expect(example.text()).to.equal(state.firstName);
    });

पात्र

import React from 'react';
import { connect } from 'react-redux'
import Example from './Example';

const mapStateToProps = (state) => ({
    name: state.firstName
})

export default connect(mapStateToProps)(Example);

प्रस्तुतीकरण

import React, { Component } from 'react';

export default class Example extends Component {
    render(){
        return (
            <div className='example'>
                {this.props.firstName}
            </div>
        )
    }
}

इसे उथले तरीके से करने का एक और तरीका है, डबल उथला करना। उथले माता-पिता पर उथला बच्चे के घटक को उथला कर देगा कि इसकी लपेट, कुछ इस तरह है:

it('get child component by double shallow()', () => {
        const container = shallow(<ExampleContainer store={fakeStore({})}/>),
            presentationalChildComponent = container.find(Example).shallow().find('.example');

        expect(presentationalChildComponent).to.have.length(1);
    });

तो यह एक और तरीका है, आप अपने प्रस्तुति घटक के परिणाम की जांच कर रहे हैं।

किसी भी तरह से काम करेगा ... हालांकि जैसा आपने कहा कि mapStateToProps निर्यात किया जा रहा है शायद सबसे अच्छा है, क्योंकि मुझे प्रोप स्टेट सेट करने के मामले में परीक्षण की परवाह है।

मुझे एहसास है कि आप पूरी तरह से परीक्षण के विशेषज्ञ हैं और मैं नहीं हूं, लेकिन ऐसा लगता है कि आप चीजों के बारे में थोड़ा सा पागल हो रहे हैं :)

नहीं, मैं सही परीक्षण नहीं कर रहा हूं, जिसका अर्थ है कि अच्छे परीक्षण जो भंगुर नहीं हैं और मूल्य प्रदान कर रहे हैं , महत्वपूर्ण है। सबसे पहले कोई भी _विशेषज्ञ_ नहीं है। हर कोई लगातार सीख रहा है, कुछ अपने अहंकार के कारण इसे स्वीकार नहीं करना चाहते हैं। इसे सॉफ्टवेयर क्राफ्ट्समैनशिप (उर्फ प्रोफेशनलिज्म) कहा जाता है।

केवल व्यवहार का परीक्षण करना और सहयोगियों का परीक्षण नहीं करना (कनेक्ट() स्वयं) जैसा आपने कहा था, महत्वपूर्ण है। पहली बार इसका पता लगाना और अच्छी तरह से परीक्षण करना महत्वपूर्ण है। यह सुनिश्चित करना कि आप सहयोगियों का परीक्षण नहीं कर रहे हैं, महत्वपूर्ण है और इसके लिए कभी-कभी साथी देवों के बीच चर्चा की आवश्यकता होती है।

आपके पास भंगुर परीक्षण हो सकते हैं, और यह महत्वपूर्ण है कि भंगुर परीक्षण न हों। परीक्षण को गंभीरता से लिया जाना चाहिए, और इसका मतलब है कि अगर आप सही तरीके से संपर्क कर रहे हैं तो लगातार जाँच करें। मैं बस अपने प्रवाह का पता लगाने की कोशिश कर रहा हूं। I TDD, इसलिए मैं कैसे शुरुआत करता हूं, यह महत्वपूर्ण है, और इसके साथ अच्छे परीक्षण महत्वपूर्ण हैं। इसलिए किसी को भी यह महसूस नहीं करना चाहिए कि वे "पागल" हैं जब वे रिएक्ट घटकों का परीक्षण करने के विभिन्न तरीकों को समझना चाहते हैं।

नया रिएक्ट टेस्ट रेपो आ रहा है...
वास्तव में मैं जल्द ही एक रेपो साझा करने जा रहा हूं जो विभिन्न शैलियों और संयोजनों को दिखाता है और प्रतिक्रिया-रेडक्स का परीक्षण करने के लिए दृष्टिकोण दिखाता है। मुझे लगता है कि इससे लोगों को मदद मिलेगी क्योंकि इस बारे में सोचने वाला मैं अकेला नहीं हूं। बार-बार आप लोगों को Redux कंटेनर और अन्य घटकों के परीक्षण के बारे में वही प्रश्न पूछते हुए देखते हैं। Redux डॉक्स और न ही प्रतिक्रिया-रेडक्स डॉक्स उस पर न्याय करते हैं, उनके पास परीक्षण क्षेत्र IMO में प्रलेखन की कमी है। यह केवल सतह को खरोंचता है, और हमें एक अच्छे रेपो की आवश्यकता होती है जो रिएक्ट परीक्षण के बारे में विभिन्न शैलियों को दिखाता है, इसलिए मैं इसे जल्द ही डाल दूंगा।

If anyone would like to contribute to that repo, please get a hold of me ताकि मैं आपको इसमें एक सहयोगी के रूप में जोड़ सकूं। मुझे अच्छा लगेगा कि लोग उदाहरण जोड़ें। मैं एंजाइम , एवा , जेस्ट , टेप इत्यादि के साथ सीधे रिएक्ट टेस्ट यूटिल्स + मोचा के साथ उदाहरण देखना चाहता हूं।

निष्कर्ष :

मुझे लगता है कि हमने जिन दोनों तरीकों पर चर्चा की है, वे ठीक हैं। सीधे विधि का परीक्षण करें, या इसका परीक्षण करें जैसे मैंने ऊपर किया, इसमें गोता लगाएँ। कभी-कभी आप अपने परीक्षणों को एक विशिष्ट पद्धति पर आधारित नहीं करना चाहते हैं क्योंकि आप नाजुक परीक्षण प्राप्त कर सकते हैं ... इसलिए परीक्षण के साथ लोग अतीत में क्यों फंस गए। तो एक समारोह के आसपास परीक्षण करना है या नहीं, चाहे वह "इकाई" का परीक्षण करता हो। कभी-कभी आप किसी विधि को सार्वजनिक नहीं करना चाहते हैं, और इससे ऊपर के अनुबंध का परीक्षण करना और उसमें से कुछ को निजी रखना बेहतर हो सकता है। इसलिए यह सोचना हमेशा महत्वपूर्ण होता है कि जब आप परीक्षण लिखते हैं तो आप अक्सर क्या कर रहे होते हैं। उसमें कोी बुराई नहीं है। अच्छे परीक्षण लिखना आसान नहीं है।

ठीक यही टीडीडी बढ़ावा देता है, अक्सर ऐसा करते हुए। ताकि आप दुबले-पतले बेहतर कम नाजुक कोड के साथ समाप्त हों। टीडीडी आपको बाद में नहीं, बल्कि सामने से परीक्षण करने के बारे में सोचने के लिए मजबूर करता है। यही अंतर है और क्यों मेरे जैसे लोग अलग-अलग प्रवाह और दृष्टिकोणों को समझना चाहते हैं क्योंकि जब मैं टीडीडी करता हूं, तो यह मुझे अक्सर छोटे-छोटे हिस्सों में डिजाइन का पुनर्मूल्यांकन करने के लिए मजबूर करता है, और इसका मतलब है कि मेरे परीक्षण दृष्टिकोण के बारे में अक्सर सोचना।

@markerikson आपके इनपुट के लिए धन्यवाद, मुझे बात करना पसंद है। अच्छी बात है यार। मैं आपकी विशेषज्ञता पर सवाल नहीं उठा रहा था, बस मैंने वास्तव में सीधे mapStateToProps का परीक्षण करने की कोशिश नहीं की थी! आप एक गैर-परीक्षक होने के लिए बुरा नहीं कर रहे हैं;)। मैं बस redux के लिए नया हूँ, इतना सरल इसलिए मेरे पास ऐसे प्रश्न होंगे जो "सतह को स्पर्श करें" नहीं हैं। हमें निचले स्तर पर परीक्षण पर चर्चा करनी चाहिए ताकि लोग समझ सकें कि वे क्या कर रहे हैं, वे इसे कैसे कर सकते हैं, और यदि वे अपने दृष्टिकोण से लाभान्वित हो रहे हैं। ऐसा करने के लिए आपको निचले स्तर पर कनेक्ट, रिएक्ट-रेडक्स, प्रदाता को समझना होगा ... ताकि आप जान सकें कि "केवल व्यवहार का परीक्षण कैसे करें"। मैंने कई लोगों को mapStateToProps निर्यात करते नहीं देखा है जो मेरे लिए भी दिलचस्प है ... और इससे मुझे आश्चर्य होता है कि क्यों नहीं।

WeDoTDD.com
रुचि रखने वाले किसी भी व्यक्ति के लिए BTW, मैंने पिछले साल WeDoTDD.com शुरू किया (React btw में लिखा गया)। यदि कोई विशिष्ट टीम (किसी विशेष टीम के सभी देव) TDD, या आपकी पूरी कंपनी (कुछ कंपनियों के पास ऐसे देव हैं जहाँ सभी TDD विशेष रूप से परामर्श देने वाली कंपनियाँ हैं), तो कृपया slack.wedotdd.com पर मुझसे संपर्क करें।

अद्यतन।

जुड़े घटकों के परीक्षण के साथ और अधिक खेलने के बाद और मेरे लिए क्या अच्छा काम कर रहा है, इस पर प्रतिबिंबित करने के बाद, मैं अब @markerikson के कथन से 100% सहमत हूं:

यदि आप वास्तव में ऐसा महसूस करते हैं कि आपको किसी कनेक्टेड घटक का परीक्षण करने की आवश्यकता है, तो आपको रेंडर करने में सक्षम होना चाहिए प्रदाता या संदर्भ या किसी भी चीज़ के बारे में चिंता किए बिना।

मैंने अपने परीक्षणों में <Provider /> पेश करने की कोई आवश्यकता नहीं देखी है और ऐसा लगता है कि आप एक सहयोगी का परीक्षण कर रहे हैं यदि आप ऐसा करते हैं जब बिंदु यह परीक्षण नहीं करना है कि <Provider /> काम कर रहा है। आपको परीक्षण करना चाहिए कि आपके घटक में व्यवहार काम करता है और इससे कोई फर्क नहीं पड़ता कि आपके कंटेनर को संदर्भ के माध्यम से स्टोर मिल रहा है या नहीं। बस स्टोर को एक प्रोप के रूप में पास करें..कनेक्ट को स्टोर पर जाने के लिए बस किसी तरह की जरूरत है, यह परवाह नहीं करता है कि कैसे (संदर्भ या प्रॉप्स) ... अपने परीक्षणों में प्रदाता से पूरी तरह से छुटकारा पाएं।

मुझे एंजाइम के संदर्भ विकल्प का उपयोग करने की आवश्यकता नहीं दिखती है जो कि एक और तरीका है जिससे आप रिएक्ट के संदर्भ के माध्यम से स्टोर को जारी रख सकते हैं। अपने परीक्षणों में प्रतिक्रिया के संदर्भ को पूरी तरह से भूल जाओ, यह पूरी तरह से अनावश्यक ब्लोट है और आपके परीक्षणों को बनाए रखने और पढ़ने के लिए अधिक जटिल और अधिक कठिन बना देता है।

अपने कंटेनर फ़ाइल में निर्यात करके सीधे अपने mapStateToProps शुद्ध कार्य का परीक्षण करें। मैं mapStateToProps परीक्षण के कॉम्बो का उपयोग कर रहा हूं + कुछ परीक्षण भी जो मेरे कंटेनर को उथले रूप से परीक्षण करते हैं, यह सत्यापित करते हुए कि प्रेजेंटेशनल घटक कम से कम प्रोप प्राप्त कर रहा है और फिर मैं प्रोप परीक्षण के साथ वहां रुकता हूं। मैंने यह भी निर्णय लिया है कि मैं अपने कंटेनर घटक परीक्षणों के लिए कोई दोहरा उथल-पुथल नहीं करूंगा। टीडीडी मुझे फीडबैक दे रहा है कि ऐसा करने की कोशिश करने से, परीक्षण बहुत जटिल हो जाते हैं और आप शायद कुछ गलत कर रहे हैं। वह "गलत" है "अपने कंटेनर घटक परीक्षणों के लिए उथले सामान को दोगुना न करें"। इसके बजाय प्रेजेंटेशनल कंपोनेंट टेस्ट का एक नया सूट बनाएं जो आपके प्रेजेंटेशनल कंपोनेंट्स के आउटपुट का स्वतंत्र रूप से परीक्षण करे।

यह जानकर खुशी हुई कि आपने चीजें ठीक कर ली हैं। (एफडब्ल्यूआईडब्ल्यू, मेरी टिप्पणियां मोटे तौर पर "सीम" और "प्रॉप्स में खुदाई" के बारे में आपके सवालों के जवाब में थीं, जो वास्तव में बिना किसी लाभ के विस्तार के अनावश्यक स्तरों पर जाने की तरह लग रही थीं।)

एक <Provider> /संदर्भ _is_ का उपयोग करना आवश्यक होने जा रहा है यदि आप एक घटक का पूर्ण रेंडर कर रहे हैं जो अन्य जुड़े घटकों को प्रस्तुत करता है, क्योंकि वे जुड़े हुए बच्चे संदर्भ में स्टोर की तलाश करेंगे।

यदि आपके पास परीक्षण पर Redux के वर्तमान दस्तावेज़ों में सुधार के लिए सुझाव हैं, तो हर तरह से एक पीआर फ़ाइल करें।

@markerikson माउंट पर अच्छा बिंदु। मैं केवल एक माउंट करूंगा, हालांकि अगर मुझे उस घटक के जीवनचक्र का परीक्षण करने की आवश्यकता है जिसका मैं परीक्षण कर रहा हूं। मैं इसका उपयोग बाल घटकों में गहरे गोता लगाने के लिए नहीं करूंगा ... अलगाव में अपना, मूल घटक के माध्यम से नहीं।

वैसे भी अच्छी चीजें, धन्यवाद!

ठीक है, केवल यह कहते हुए कि यदि आप _do_ उपयोग करते हैं mount प्रश्न में घटक के जीवनचक्र की जांच करने के लिए, और वह घटक अन्य जुड़े घटकों को प्रस्तुत करता है, तो आपको त्रुटियों से बचने के लिए उन नेस्टेड घटकों के संदर्भ में उपलब्ध स्टोर की आवश्यकता होगी जब परीक्षण किया जा रहा घटक प्रदान किया जाता है।

(संपादित करें: मैं स्पष्ट रूप से खुद को दोहरा रहा हूं, क्षमा करें - कई स्थानों पर प्रश्नों के उत्तर देने के खतरे हमेशा एक धागे के माध्यम से वापस नहीं जाते हैं, या यहां तक ​​​​कि थोड़ा सा स्क्रॉल भी करते हैं।)

आह ठीक है! हाँ इसके बारे में नहीं सोचा ...

यहां सभी टिप्पणियों के लिए धन्यवाद, @markerikson और @dschinkel! वे बहुत मददगार हैं। मैंने अब अपने असंबद्ध घटक को निर्यात करने और किसी अन्य की तरह इसका परीक्षण करने का निर्णय लिया है, और अपने mapStateToProps और mapDispatchToProps अलग-अलग परीक्षण भी किया है। हालांकि, एक ऐसा मामला है जो इन परीक्षणों को नहीं पकड़ता है, और वह यह है कि जब map(State/Dispatch)ToProps वास्तव में कॉल में पास नहीं होता है connect । उदाहरण:

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

export const mapStateToProps = ({ name }) => ({ name });

export const Example = ({ name }) => <h1>{name}</h1>;

export default connect({ name } => ({ name: firstName }))(Example); // Whoops, didn't actually pass in `mapStateToProps`.

यह शायद व्यवहार में कभी नहीं होगा, लेकिन यह हो सकता है, खासकर जब से लिंटर्स mapStateToProps को अप्रयुक्त चर के रूप में रिपोर्ट नहीं करेंगे क्योंकि इसे निर्यात किया जा रहा है।

@ डैनी-एंड्रयूज़ क्या आप अपने mapDispatchToProps फ़ंक्शन का परीक्षण करने के तरीके के बारे में अधिक विशिष्ट हो सकते हैं?

@leizard

मैं अब सीधे mapDispatchToProps या mapStateToProps का परीक्षण नहीं करता। मैंने इस धागे के बाद से अपना विचार बदल दिया है और ऐसा न करने की सलाह देता हूं।

उनका परीक्षण भी आप @ डैनी-एंड्रयू समस्या में भाग लेंगे लेकिन मुद्दा अच्छे परीक्षणों के बारे में है और उन दो कार्यों को उजागर करने का प्रयास करना एक अच्छा विचार नहीं है। यह परीक्षण खत्म हो गया है। आपको उन दो तरीकों को अप्रत्यक्ष रूप से व्यवहार का परीक्षण करके या अपने उथले कंटेनर के माध्यम से प्रोप का परीक्षण करके परीक्षण करना चाहिए। मैंने पाया कि उन निजी तरीकों को बेनकाब करने की कोशिश करने का कोई कारण नहीं है और मुझे अब एहसास हुआ कि ऐसा करने की कोशिश करना भी एक खराब परीक्षण अभ्यास था।

तो मैं @markerikson से असहमत हूं, अपने जुड़े घटक के माध्यम से परीक्षण करें।

परीक्षण करने के लिए सही एपीआई/अनुबंध ढूँढना और परीक्षण से अधिक नहीं, यह महत्वपूर्ण बच्चा है :)।

@dschinkel

आपको व्यवहार का परीक्षण करके अप्रत्यक्ष रूप से उन दो विधियों का परीक्षण करना चाहिए ...
तो मैं @markerikson से असहमत हूं, अपने जुड़े घटक के माध्यम से परीक्षण करें।

क्या आप सुझाव दे रहे हैं कि आपको असंबद्ध घटक को पूरी तरह से निर्यात करना छोड़ देना चाहिए और केवल जुड़े घटक का परीक्षण करना चाहिए? मुझे लगता है कि यह "ओवर टेस्टिंग" है। यह आपके परीक्षणों को अनावश्यक रूप से उस घटक के कार्यान्वयन विवरण से जोड़ता है जिसका वह परीक्षण कर रहा है। क्योंकि असंबद्ध घटक की कार्यक्षमता (यदि इसमें कोई है, तो यह कीड़े का एक अन्य कैन है) पूरी तरह से असंबंधित है जहां से यह अपना सहारा प्राप्त करता है। हो सकता है कि आप भविष्य में उस घटक को पूरी तरह से प्रस्तुतिकरण घटक में बदलना चाहें। यदि आप कनेक्टेड कंपोनेंट का परीक्षण करते हैं, तो आपको अपने सभी परीक्षणों को बदलना होगा ताकि किसी स्टोर को इंजेक्ट न किया जा सके बल्कि प्रॉप्स को सीधे पास किया जा सके। यदि आपने असंबद्ध घटक का परीक्षण किया है, तो आपको कनेक्टेड-घटक-विशिष्ट परीक्षणों को दूर करने के अलावा कुछ भी करने की ज़रूरत नहीं है (उस पर और अधिक)।

मैं सहमत हूं कि आपको सीधे mapStateToProps / mapDispatchToProps परीक्षण नहीं करना चाहिए। केवल परीक्षण उद्देश्यों के लिए उन निजी तरीकों को उजागर करना मुझे हमेशा एक कोड गंध की तरह लगा। वास्तव में, मुझे लगता है कि यह एकमात्र समय है जब आपको जुड़े घटक का परीक्षण करना चाहिए। तो, संक्षेप में:

1. असंबद्ध घटक और जुड़े घटक निर्यात करें
2. mapStateToProps या mapDispatchToProps निर्यात न करें
3. असंबद्ध घटक के माध्यम से सभी घटक तर्क का परीक्षण करें
4. Redux के साथ बातचीत का परीक्षण करते समय केवल कनेक्टेड घटक का परीक्षण करें (डेटा प्रॉप्स को स्टोर में उचित स्थान से पारित किया जाता है / एक्शन प्रॉप्स को उचित एक्शन क्रिएटर्स आदि को सौंपा जाता है)।

नंबर 4 करने के साथ एकमात्र अतिरिक्त ओवरहेड यह है कि आपको इसे अपने कनेक्टेड कंपोनेंट में पास करने के लिए रेडक्स स्टोर को बाहर निकालना होगा। हालाँकि, यह बहुत आसान है, क्योंकि इसकी API केवल तीन विधियाँ हैं।

MapStateToProps विधि

टेस्टकंटेनर.जेएसएक्स:

import { connect } from 'react-redux';

export const TestContainer = ({ permissions }) => (permissions['view-message'] ? 'Hello!' : null);

export const mapStateToProps = ({ auth }) => ({ permissions: auth.userPermissions });

export default connect(mapStateToProps)(TestContainer); // Ewww, exposing private methods just for testing

TestContainer.spec.jsx:

import React from 'react';
import { shallow } from 'enzyme';

import TestContainer, { mapStateToProps } from './TestContainer';

it('maps auth.userPermissions to permissions', () => {
  const userPermissions = {};

  const { permissions: actual } = mapStateToProps({
    auth: { userPermissions },
  });

  expect(actual).toBe(userPermissions);
});

नई विधि

टेस्टकंटेनर.जेएसएक्स:

import { connect } from 'react-redux';

export const TestContainer = ({ permissions }) => (permissions['view-message'] ? 'Hello!' : null);

const mapStateToProps = ({ auth }) => ({ permissions: auth.userPermissions });

export default connect(mapStateToProps)(TestContainer);

TestContainer.spec.jsx:

import React from 'react';
import { shallow } from 'enzyme';

import TestContainer, { TestComponent } from './TestContainer';

it('renders TestComponent with approriate props from store', () => {
  const userPermissions = {};
  // Stubbing out store. Would normally use a helper method. Did it inline for simplicity.
  const store = {
    getState: () => ({
      auth: { userPermissions },
    }),
    dispatch: () => {},
    subscribe: () => {},
  };
  const subject = shallow(<TestContainer store={store} />).find(TestComponent);

  const actual = subject.prop('permissions');
  expect(actual).toBe(userPermissions);
});

हाँ, मैं यही कह रहा हूं कि मैं mapStateToProps का निर्यात और परीक्षण नहीं करता , यह परीक्षण से अधिक है। एपीआई के माध्यम से परीक्षण करें। यहां एपीआई कंटेनर है।

@ डैनी-एंड्रयूज

असंबद्ध घटक के माध्यम से सभी घटक तर्क का परीक्षण करें

क्या आप कुछ उदाहरण साइट कर सकते हैं?

मेरा मतलब वही है जो आपने कहा था जब आपने कहा था: "आपको व्यवहार का परीक्षण करके परोक्ष रूप से उन दो विधियों का परीक्षण करना चाहिए"

यह शर्तों को स्पष्ट करने में मदद कर सकता है: जब मैं "असंबद्ध घटक" कहता हूं, तो मेरा मतलब कच्चे घटक से है जो कॉल में connect पर लपेटा जाता है और जब मैं "कनेक्टेड घटक" कहता हूं तो मेरा मतलब परिणामी घटक है जो से लौटाया जाता है connect पर कॉल करें। "कनेक्टेड घटक" और "कंटेनर" मेरा मानना ​​​​है कि पर्यायवाची हैं। मेरे ऊपर से:

// Unconnected component. Test all component logic by importing this guy.
export const TestComponent = ({ permissions }) => (permissions['view-message'] ? 'Hello!' : null);

const mapStateToProps = ({ auth }) => ({ permissions: auth.userPermissions });

// Connected component (container). Only test interaction with redux by importing this guy.
export default connect(mapStateToProps)(TestComponent);

कुछ लोग इन्हें पूरी तरह से विभाजित करना पसंद करेंगे और उनके "कंटेनर" को केवल connect पर कॉल करना होगा जो पूरी तरह से प्रस्तुति घटक को लपेटते हैं। उस स्थिति में, सूची में नंबर 1 और 3 चला जाता है और आपको केवल वही परीक्षण लिखने की आवश्यकता होती है जो रेडक्स (संख्या 4) के साथ बातचीत को सत्यापित करते हैं।

मैं इस पर एक बड़ा ब्लॉग पोस्ट लिखने की योजना बना रहा हूं। मैं इस समय कोड में व्यस्त हूं लेकिन बाद में जवाब दूंगा

इस सूत्र को कई बार पढ़ने के बाद, मैं इस निष्कर्ष पर पहुंचा कि 3 दृष्टिकोण सुझाए गए हैं:

1. mapDispatchToProps और mapStateToProps निर्यात करें और उनका अलग से परीक्षण करें
2. कंटेनर घटक को उथला प्रस्तुत करें और परीक्षण करें कि वायरिंग सही है
3. mapStateToProps के बजाय चयनकर्ताओं और mapDispatchToProps के बजाय एक्शन क्रिएटर्स का उपयोग करें और उनका अलग से परीक्षण करें; यह सुनिश्चित करने के लिए कि संपूर्ण प्रवाह काम करता है, एक्शन क्रिएटर्स, रिड्यूसर और चयनकर्ताओं का एक साथ परीक्षण लिखें।

अंत में, मुझे लगता है कि सभी विकल्प मान्य हैं, लेकिन उनके अपने फायदे और नुकसान हैं। "शुद्धतम" शायद दूसरा है, लेकिन इसमें अधिकांश काम भी शामिल है। मेरी व्यक्तिगत प्राथमिकता वास्तव में विकल्प 3 की ओर जाएगी।
मैंने अपने ब्लॉग पर इसके बारे में और विस्तार से लिखा है, जहां मेरे पास कुछ कोड नमूने भी हैं।

@ucorina
ES6 मॉड्यूल की वर्तमान दुनिया में, प्रत्येक फ़ाइल को अपने स्वयं के दायरे में लिपटे मॉड्यूल के रूप में माना जाता है। निर्यात करना आपके छोटे मॉड्यूल का एपीआई है और निर्यात विधियों के लिए यह बहुत गलत लगता है, बस आप उनका परीक्षण कर सकते हैं। यह इसी तरह है कि आप निजी तरीकों को कैसे सार्वजनिक करेंगे, बस उनका परीक्षण करने के लिए।

इसलिए मैं @dschinkel दृष्टिकोण की ओर झुक रहा हूं और नक्शा डिस्पैच और मैपस्टेट निर्यात नहीं कर रहा हूं, क्योंकि मेरे लिए वे जुड़े घटक के निजी कार्यान्वयन हैं।

हालांकि मुझे यकीन नहीं है कि एक घटक के साथ क्या करना है, जो केवल एक कनेक्ट के आसपास एक और घटक लपेटता है।

क्या आपने कभी ब्लॉग पोस्ट लिखा है? @dschinkel इसे पढ़ना पसंद करेंगे

@AnaRobynn

हाँ, मैं आपसे सहमत हूँ कि केवल mapDispatch और mapState निर्यात करना गलत लगता है, और मैं शायद स्वयं इसका उपयोग नहीं करूँगा, हालाँकि यह एक वैध विकल्प है, भले ही कम "शुद्ध" विकल्प हो . मैंने इसे एक संभावित विकल्प के रूप में भी वहीं छोड़ दिया क्योंकि डैन अब्रामोव ने यहां इस सटीक तकनीक का सुझाव दिया था: https://github.com/reduxjs/react-redux/issues/325#issuecomment -199449298।

"एक घटक के साथ क्या करना है, जो केवल एक कनेक्ट के चारों ओर एक और घटक लपेटता है" के आपके प्रश्न का उत्तर देने के लिए, मैं कहूंगा कि इसका परीक्षण न करें। आपके आवेदन से संबंधित कोई व्यावसायिक तर्क नहीं है और आप connect कार्यान्वयन का परीक्षण नहीं करना चाहते हैं - जिसका परीक्षण पहले ही react-redux लाइब्रेरी में किया जा चुका है।

यदि आप अभी भी किसी भी तरह से परीक्षण करना चाहते हैं, तो भविष्य में अपने कोड को प्रमाणित करने के लिए, आप हमेशा दूसरे दृष्टिकोण का पालन कर सकते हैं जिसका मैं यहां वर्णन करता हूं जो कि @dschinkel वर्णन कर रहा है।

@ucorina बिल्कुल, मुझे लगता है कि विकल्प वह है जिसके लिए मैं भी जाऊंगा! अपने उत्तर को अधिक गहराई से समझाने के लिए धन्यवाद। यह एक अच्छी तरह से लिखी गई ब्लॉग पोस्ट है। बधाई!

@ucorina फिर से परेशान करने के लिए खेद है, लेकिन थोड़ी देर के लिए सोने के बाद मुझे यकीन नहीं है कि मैं विकल्प 2 से पूरी तरह सहमत हूं। हालांकि मुझे यकीन नहीं है। मैं mapStateToProps के परीक्षण के लाभ के बारे में भी निश्चित नहीं हूं।

क्या आपको लगता है कि यह ठीक है कि "विकल्प 2", परोक्ष रूप से एक्शन क्रिएटर्स का भी परीक्षण करता है? और परोक्ष रूप से चयनकर्ताओं का परीक्षण भी? क्या वह अच्छी चीज़ है?
मैं इसके द्वारा 100% आश्वस्त नहीं हूं, लेकिन मैं वहां सभी (गलत) सूचनाओं के बारे में भी भ्रमित हूं। परीक्षण के लिए बहुत सारे अलग-अलग विचार हैं।

1. केवल mapStateToProps के अंदर चयनकर्ताओं का उपयोग करें
   
   
   
   • जरूरत पड़ने पर कंटेनर परीक्षण के दौरान उनका मजाक उड़ाएं
   
   
   • चयनकर्ताओं का अलग से परीक्षण करें।
   
   
   • केवल mapDispatchToProps के अंदर एक्शन क्रिएटर्स का उपयोग करें
   
   
   • जरूरत पड़ने पर कंटेनर टेस्ट के दौरान उनका मजाक उड़ाएं।
   
   
   • एक्शन क्रिएटर्स का अलग से परीक्षण करें।
   
   
   • जुड़ा हुआ घटक उथला है
   
   
   • जोर देकर कहा गया है
   
   
   • किसी भी अतिरिक्त तर्क का परीक्षण करें जिसे mapStateToProps , mapDispatchToProps या mergeProps में जोड़ा जाना था और पहले से कहीं और परीक्षण नहीं किया गया है। (सशर्त प्रेषण, चयनकर्ता जो ownProps , आदि से तर्क लेते हैं)
     
     
     
     
     
     • इस मामले में आप केवल उन मॉक का परीक्षण कर रहे हैं जिन्हें सही मात्रा में और सही आर्ग के साथ बुलाया गया था।
     
     
     
   
   

विकल्प:

• कंटेनर+चयनकर्ताओं का एक साथ परीक्षण करने के लिए मॉक स्टोर स्थिति
• एपी कॉल के बाहर नकली कंटेनर + क्रियाओं को एक साथ परीक्षण करने के लिए

@AnaRobynn मेरा मानना ​​​​है कि @ucorina का दूसरा दृष्टिकोण सही है।

जो कुछ मैं सुनता हूं वह सुझाव देता है:

1. आपको mapDispatchToProps का पर्दाफाश करना चाहिए, और सीधे इसका परीक्षण करना चाहिए
2. कनेक्ट () के लिए आपको अपनी कॉल का परीक्षण करने की आवश्यकता नहीं है क्योंकि कनेक्ट () पहले से ही परीक्षण किया गया है

1 के संबंध में, मुझे नहीं लगता कि परीक्षण करने के लिए आंतरिक का पर्दाफाश करना एक अच्छा अभ्यास है। आपके परीक्षण ए: अब आंतरिक संरचना मान लें, और बी: इस बात का परीक्षण करना चाहिए कि वे वास्तव में कैसे उपयोग किए जा रहे हैं।

2 के संबंध में, आपको _absolute_ किसी ऐसी चीज़ का परीक्षण करना चाहिए जो बाहरी लाइब्रेरी को कॉल करे। यह तोड़ने के लिए किसी भी आवेदन में कमजोर बिंदुओं में से एक है। किसी भी पुस्तकालय के साथ एक मामूली/पैच संस्करण टक्कर में एक ब्रेकिंग परिवर्तन पेश किया जाना अभी भी संभव है, और आप अपने परीक्षणों को तेजी से विफल करना चाहते हैं।

क्या आपको लगता है कि यह ठीक है कि "विकल्प 2", परोक्ष रूप से एक्शन क्रिएटर्स का भी परीक्षण करता है? और परोक्ष रूप से चयनकर्ताओं का परीक्षण भी? क्या वह अच्छी चीज़ है?

हां, अनावश्यक परीक्षण कवरेज एक अच्छी बात है।

@philihp @dougbacelar
मेरा मानना ​​​​है कि मैं रिएक्ट अनुप्रयोगों के परीक्षण से थोड़ा संबंधित हूं। मेरे वर्तमान विश्वास और विषय के बारे में विचार:

1. यदि आपको कई घटकों में उन मैपिंग की आवश्यकता नहीं है, तो mapStateToProps और mapDispatchToProps को उजागर न करें। उन्हें सिर्फ परीक्षण के लिए निर्यात करना एक विरोधी पैटर्न है।
2. मैं वर्तमान में कंटेनरों को सहयोगियों के रूप में देखता हूं (कार्य जो अन्य कार्यों को सौंपते हैं और वे अन्य कार्य वास्तविक तर्क करते हैं)।
   इसका क्या मतलब है?
3. कंटेनर कोई तर्क नहीं करते हैं
4. राज्य का चयन करने का तर्क चयनकर्ता कार्यों के लिए है (जो विशुद्ध रूप से इकाई परीक्षण किया जा सकता है)
5. एक्शन क्रिएटर्स में एक्शन के तर्क छिपे होते हैं (जो इस बात पर निर्भर करता है कि आप रेडक्स-थंक का उपयोग कर रहे हैं या नहीं, आप स्वयं सहयोगी हैं)
6. प्रस्तुत दृश्य एक अन्य कार्य है (जिसमें संभावित रूप से एक अन्य सहयोगी कार्य है या विशुद्ध रूप से सामान प्रस्तुत करता है

=> जब आप उचित परीक्षण पुस्तकालयों का उपयोग करते हैं तो इसके लिए परीक्षण सेटअप वास्तव में बहुत सरल होता है (मैं testdouble.js की अनुशंसा करता हूं)।
=> testdouble.js के माध्यम से अपने चयनकर्ता और कार्यों का मजाक उड़ाएं ( td.when() का उपयोग करके)
=> अपने कंटेनर घटक को उथला रेंडर करें, dive() एक बार दृश्य घटक के तरीकों तक पहुंच प्राप्त करने के लिए
=> नियमों के सेट को देखते हुए td.when() अगर घटक सही ढंग से व्यवहार करता है तो जोर दें

कुछ नकली स्टोर लाइब्रेरी को इंजेक्ट करने की आवश्यकता नहीं है, स्टोर को बाहर निकालना ठीक है।

उदाहरण:

/** <strong i="27">@format</strong> */

import React from 'react';
import { shallow } from 'enzyme';

function setup(props) {
  const HasOrganization = require('./HasOrganization').default;
  const defaultProps = {
    store: {
      subscribe: Function.prototype,
      getState: Function.prototype,
      dispatch: Function.prototype,
    },
  };
  const container = shallow(<HasOrganization {...defaultProps} {...props} />);
  return {
    container,
    wrapper: container.dive(),
  };
}

describe('<HasOrganization /> collaborations', () => {
  let getCurrentOrganizationId;
  beforeEach(() => {
    getCurrentOrganizationId = td.replace('../containers/App/userSelectors')
      .selectCurrentOrganizationId;
  });

  test('not render anything when the id is not valid', () => {
    const Dummy = <div />;
    td.when(getCurrentOrganizationId()).thenReturn(null);
    const { wrapper } = setup({ children: Dummy });

    expect(wrapper.find('div').length).toBe(0);
  });

  test('render something when the id is valid', () => {
    const Dummy = <div />;
    td.when(getCurrentOrganizationId()).thenReturn(1);
    const { wrapper } = setup({ children: Dummy });

    expect(wrapper.find('div').length).toBe(1);
  });
});

विचार?

@AnaRobynn अंक 1 और 2 से पूरी तरह सहमत हैं!

मेरे कंटेनर आमतौर पर बहुत सीधे आगे होते हैं:

// imports hidden

const mapStateToProps = (state, { userId }) => ({
  isLoading: isLoading(state),
  hasError: hasError(state),
  placeholders: getPlaceholders(userId)(state), // a list of some sort
  shouldDoStuff: shouldDoStuff(state),
});

const mapDispatchToProps = {
  asyncActionPlaceholder,
};

export const mergeProps = (stateProps, dispatchProps, ownProps) => {
  return {
    ...stateProps,
    ...dispatchProps,
    ...ownProps,
    onMount: () => {
      if (stateProps.shouldDoStuff) {
        dispatchProps.asyncActionPlaceholder(ownProps.userId);
      }
    },
  };
};

export default compose(
  connect(
    mapStateToProps,
    mapDispatchToProps,
    mergeProps
  ),
  callOnMount(props => props.onMount())
)(SampleComponent);

तो मैं

1. सभी चयनकर्ताओं और एक्शन क्रिएटर की जासूसी करें
2. परीक्षण getPlaceholders जासूस को सही उपयोगकर्ता आईडी के साथ बुलाया गया था
3. मुखर SampleComponent को सही प्रॉप्स के साथ प्रस्तुत किया गया था
4. onMount प्रोप को SampleComponent से कॉल करें और सत्यापित करें कि यह नकली कार्रवाई भेजता है जब shouldDoStuff===true

• प्रॉप्स के आधार पर सामान के सशर्त प्रतिपादन जैसी चीजें मैं SampleComponent . के लिए एक अलग परीक्षण पर परीक्षण करूंगा
• मैं स्टोर का मजाक उड़ाने के लिए redux-mock-store का उपयोग करना भी पसंद करता हूं जैसे configureMockStore([thunk])() लेकिन लगता है कि ऐसा नहीं करना ठीक है ...

टीएल; डीआर I मूल रूप से केवल परीक्षण चयनकर्ताओं को सही तर्कों के साथ बुलाया गया था, नकली कार्यों को सफलतापूर्वक भेजा गया था (यदि वे किसी तर्क पर निर्भर करते हैं) और बच्चे के घटक को सही प्रोप के साथ प्रस्तुत किया जाता है

@philihp

• मैं बाहरी पुस्तकालयों के परीक्षण के बहुत खिलाफ हूं, मैं हर चीज का मजाक उड़ाना और चीजों को अलग-थलग करना पसंद करता हूं।
• मुझे विश्वास है कि एंड-टू-एंड परीक्षण पुस्तकालय उन्नयन के कारण होने वाली किसी भी बड़ी समस्या को उठाएंगे।
• कारण मैं कंटेनरों + चयनकर्ताओं + एक्शन क्रिएटर्स का एक साथ परीक्षण करना पसंद नहीं करता, यह है कि आपको हर दूसरे कंटेनर के लिए समान चयनकर्ताओं और एक्शन क्रिएटर्स को फिर से उपयोग करना होगा जो उनका पुन: उपयोग करते हैं। उस समय आप यूनिट परीक्षणों में अधिक परीक्षण मामलों को जोड़ने से बेहतर हैं।

@dougbacelar क्या आप अपने द्वारा दिखाए गए घटक का परीक्षण करने के लिए कुछ नमूना परीक्षण कोड दे सकते हैं। आप एंजाइम का उपयोग कर रहे हैं? कुछ और? उथला? माउंट?

@dougbacelar

मैं बाहरी पुस्तकालयों के परीक्षण के बहुत खिलाफ हूं, मैं हर चीज का मजाक उड़ाना और चीजों को अलग-थलग करना पसंद करता हूं।

जरूरत पड़ने पर मजाक उड़ाएं, लेकिन अगर आप असली चीज का इस्तेमाल कर सकते हैं, तो क्यों नहीं? जब कुछ कॉल धीमी होती हैं, या नेटवर्क अनुरोध जैसे साइड इफेक्ट होते हैं तो मॉकिंग उपयोगी होती है।

कारण मैं कंटेनरों + चयनकर्ताओं + एक्शन क्रिएटर्स का एक साथ परीक्षण करना पसंद नहीं करता, यह है कि आपको हर दूसरे कंटेनर के लिए समान चयनकर्ताओं और एक्शन क्रिएटर्स को फिर से उपयोग करना होगा जो उनका पुन: उपयोग करते हैं। उस समय आप यूनिट परीक्षणों में अधिक परीक्षण मामलों को जोड़ने से बेहतर हैं।

हां , अपने चयनकर्ताओं, एक्शन क्रिएटर्स का स्वतंत्र रूप से परीक्षण करें। बहुत सारे अपेक्षित इनपुट के साथ उनका पूरी तरह से परीक्षण करें।

हां , अपने कंटेनरों का भी परीक्षण करें। अगर इसका मतलब है कि वे चयनकर्ताओं और एक्शन क्रिएटर्स पर ओवरलैपिंग कवरेज प्रदान करते हैं, तो यह कोई बुरी बात नहीं है।

यहाँ मेरा मतलब है...

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { saveColor } from '../actions/save';
import { selectColors } from '../reducers/colors.js';
import ColorButtons from '../components/ColorButtons';
const ColorButtons = ({ colors, onClick }) => (
  <div>
    {colors.map(color => {
      <button type="button" key={color} onClick={onClick(color)}>{color}</button>
    })}
  </div>
);
ColorButtons.propTypes = {
  colors: PropTypes.arrayOf(PropTypes.string),
  onClick: PropTypes.func.isRequired,
};
const mapStateToProps = state => ({
  colors: selectColors(state.colors),
});
const mapDispatchToProps = dispatch => ({
  onClickColor: color => () => {
    dispatch(saveColor({ color }));
  },
});
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ColorButtons);

import React from 'react';
import { shallow } from 'enzyme';
import configureStore from 'redux-mock-store';
import ColorButtons from '../ColorButtons';
import { saveColor } from '../../actions/save';
import { selectColors } from '../../reducers/colors.js';
const buildStore = configureStore();
describe('<ColorButtons />', () => {
  let store;
  let wrapper;
  const initialState = { colors: ['red', 'blue'] };
  beforeEach(() => {
    store = buildStore(initialState);
    wrapper = shallow();
  });
  it('passes colors from state', () => {
    expect(wrapper.props().colors).toEqual(selectColors(initialState.colors));
  });
  it('can click yellow', () => {
    const color = 'yellow';
    wrapper.props().onClick(color)();
    expect(store.getActions()).toContainEqual(saveColor({ color }));
  });
});

यहां, यह उन सभी अलग-अलग पैराम्स का परीक्षण नहीं कर रहा है जो selectColors और saveColor प्राप्त कर सकते हैं; यह परीक्षण कर रहा है कि जब <ColorButtons /> बनाया जाता है, तो उसे वे गुण मिलते हैं जिनकी हम अपेक्षा करते हैं। किसी अन्य परीक्षण में बिल्कुल उनका परीक्षण करें।

import { selectColors } from '../colors.js';
describe('selectColors', () => {
  it('returns the colors', state => {
    expect(selectColors(['red'])).toEqual(['red'])
  })
  it('returns an empty array if null', state => {
    expect(selectColors(null)).toEqual([])
  })
  it('returns a flattened array', state => {
    expect(selectColors(['red', ['blue', 'cyan']])).toEqual(['red','blue','cyan'])
  })
})

मैं बाहरी पुस्तकालयों के परीक्षण के बहुत खिलाफ हूं, मैं हर चीज का मजाक उड़ाना और चीजों को अलग-थलग करना पसंद करता हूं।

जरूरत पड़ने पर मजाक उड़ाएं, लेकिन अगर आप असली चीज का इस्तेमाल कर सकते हैं, तो क्यों नहीं? जब कुछ कॉल धीमी होती हैं, या नेटवर्क अनुरोध जैसे साइड इफेक्ट होते हैं तो मॉकिंग उपयोगी होती है।

असहमत, आंशिक रूप से।
मैं कभी भी बाहरी पुस्तकालयों का मज़ाक नहीं उड़ाता (जो आपके पास नहीं है उसका मज़ाक न उड़ाएँ), लेकिन मैं उदाहरण के लिए एक आवरण लिखता हूँ axios. अपने सहयोग परीक्षण में मैं केवल सभी कार्यों का मजाक उड़ा सकता हूं और सुनिश्चित कर सकता हूं कि सब कुछ सही ढंग से तार-तार हो गया है।

अपने सहयोग परीक्षणों में मैं हमेशा मॉड्यूल, फ़ंक्शंस आदि का मज़ाक उड़ाता हूँ
आपके सहयोगी द्वारा बुलाए गए इन कार्यों को आसानी से इकाई परीक्षण किया जा सकता है।

यहाँ मेरा मतलब है...

असहमत भी।
आप यहां अपने रिड्यूसर और चयनकर्ताओं का पूरी तरह से परीक्षण कर रहे हैं। यदि आप यही ठीक करना चाहते हैं, लेकिन मैं इन कार्यों का मजाक उड़ाना पसंद करता हूं और जांचता हूं कि उन्हें सही तरीके से बुलाया गया है या नहीं। बाकी को रेड्यूसर/चयनकर्ता द्वारा नियंत्रित किया जाता है।

यह थ्रेड https://martinfowler.com/articles/mocksArentStubs.html , क्लासिकल और मॉकिस्ट टेस्टिंग में बनाए गए बिंदुओं को रीहैश कर रहा है।

माना। ताला लगाना।