unit testing - यूनिट टेस्ट रिएक्ट-रेडक्स कनेक्टेड घटक कैसे करें?




unit-testing reactjs (3)

2 फाइलें बनाने का प्रयास करें, एक घटक के साथ, किसी भी स्टोर या कुछ भी नहीं (PhoneVerification-component.js) से अवगत नहीं है। फिर दूसरा एक (PhoneVerification.js), जिसे आप अपने एप्लिकेशन में उपयोग करेंगे और जो केवल connect फ़ंक्शन के माध्यम से स्टोर करने के लिए सब्सक्राइब किए गए पहले घटक को लौटाता है, जैसे कुछ

import PhoneVerificationComponent from './PhoneVerification-component.js'
import {connect} from 'react-redux'
...
export default connect(mapStateToProps, mapDispatchToProps)(PhoneVerificationComponent)

फिर आप अपने परीक्षण में PhoneVerification-component.js आवश्यकता के साथ अपने "गूंगा" घटक का परीक्षण कर सकते हैं और इसे आवश्यक PhoneVerification-component.js प्रदान कर सकते हैं। पहले से परीक्षण किए गए परीक्षण का कोई बिंदु नहीं है (सजावटकर्ता, मैपस्टेट टोपप्रॉप, मैप डिस्पैचटप्रॉप इत्यादि कनेक्ट करें ...)

मैं यूनिट परीक्षणों के लिए मोचा, चाई, कर्म, सीनॉन, वेबपैक का उपयोग कर रहा हूं।

मैंने रिएक्ट-रेडक्स कोड के लिए अपने परीक्षण वातावरण को कॉन्फ़िगर करने के लिए इस लिंक का पालन किया।

https://medium.com/@scbarrus/how-to-get-test-coverage-on-react-with-karma-babel-and-webpack-c9273d805063#.7kcckz73r

मैं सफलतापूर्वक मेरी क्रिया और reducers जावास्क्रिप्ट कोड का परीक्षण कर सकते हैं, लेकिन जब मेरे घटकों का परीक्षण करने की बात आती है तो यह हमेशा कुछ त्रुटि फेंक देता है।

import React from 'react';
import TestUtils from 'react/lib/ReactTestUtils'; //I like using the Test Utils, but you can just use the DOM API instead.
import chai from 'chai';
// import sinon from 'sinon';
import spies from 'chai-spies';

chai.use(spies);

let should = chai.should()
  , expect = chai.expect;

import { PhoneVerification } from '../PhoneVerification';

let fakeStore = {
      'isFetching': false,
      'usernameSettings': {
        'errors': {},
        'username': 'sahil',
        'isEditable': false
      },
      'emailSettings': {
        'email': '[email protected]',
        'isEmailVerified': false,
        'isEditable': false
      },
      'passwordSettings': {
        'errors': {},
        'password': 'showsomestarz',
        'isEditable': false
      },
      'phoneSettings': {
        'isEditable': false,
        'errors': {},
        'otp': null,
        'isOTPSent': false,
        'isOTPReSent': false,
        'isShowMissedCallNumber': false,
        'isShowMissedCallVerificationLink': false,
        'missedCallNumber': null,
        'timeLeftToVerify': null,
        '_verifiedNumber': null,
        'timers': [],
        'phone': '',
        'isPhoneVerified': false
      }
}

function setup () {
    console.log(PhoneVerification);
    // PhoneVerification.componentDidMount = chai.spy();
    let output = TestUtils.renderIntoDocument(<PhoneVerification {...fakeStore}/>);
    return {
        output
    }
}

describe('PhoneVerificationComponent', () => {
    it('should render properly', (done) => {
        const { output } = setup();
        expect(PhoneVerification.prototype.componentDidMount).to.have.been.called;
        done();
    })
});

यह निम्न त्रुटि उपरोक्त कोड के साथ आता है।

FAILED TESTS:
  PhoneVerificationComponent
    ✖ should render properly
      Chrome 48.0.2564 (Mac OS X 10.11.3)
    Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

साइनऑन जासूसों से चाई-जासूसों में स्विच करने का प्रयास किया।

मैं अपने रिएक्ट-रेडक्स कनेक्टेड घटक (स्मार्ट घटक) का परीक्षण कैसे करूं?


आप अपने जुड़े घटक का परीक्षण कर सकते हैं और मुझे लगता है कि आपको ऐसा करना चाहिए। आप पहले अनकनेक्टेड घटक का परीक्षण करना चाह सकते हैं, लेकिन मेरा सुझाव है कि आपके पास कनेक्टेड घटक का परीक्षण किए बिना पूर्ण परीक्षण कवरेज नहीं होगा।

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

import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';
import SongForm from '../SongForm'; // import the CONNECTED component

// Use the same middlewares you use with Redux's applyMiddleware
const mockStore = configureMockStore([ /* middlewares */ ]);
// Setup the entire state, not just the part Redux passes to the connected component.
const mockStoreInitialized = mockStore({ 
    songs: { 
        songsList: {
            songs: {
                songTags: { /* ... */ } 
            }
        }
    }
}); 

const nullFcn1 = () => null;
const nullFcn2 = () => null;
const nullFcn3 = () => null;

const wrapper = mount( // enzyme
        <Provider store={store}>
          <SongForm
            screen="add"
            disabled={false}
            handleFormSubmit={nullFcn1}
            handleModifySong={nullFcn2}
            handleDeleteSong={nullFcn3}
          />
        </Provider>
      );

const formPropsFromReduxForm = wrapper.find(SongForm).props(); // enzyme
expect(
        formPropsFromReduxForm
      ).to.be.deep.equal({
        screen: 'add',
        songTags: initialSongTags,
        disabled: false,
        handleFormSubmit: nullFcn1,
        handleModifySong: nullFcn2,
        handleDeleteSong: nullFcn3,
      });

===== ../SongForm.js

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

const SongForm = (/* object */ props) /* ReactNode */ => {
    /* ... */
    return (
        <form onSubmit={handleSubmit(handleFormSubmit)}>
            ....
        </form>

};

const mapStateToProps = (/* object */ state) /* object */ => ({
    songTags: state.songs.songTags
});
const mapDispatchToProps = () /* object..function */ => ({ /* ... */ });

export default connect(mapStateToProps, mapDispatchToProps)(SongForm)

आप शुद्ध रेडक्स के साथ एक स्टोर बनाना चाहते हैं। रेडक्स-मॉक-स्टोर इसका परीक्षण करने के लिए इसका एक हल्का वजन वाला संस्करण है।

आप airbnb के एंजाइम के बजाय प्रतिक्रिया-एडॉन्स-टेस्ट-यूटिल का उपयोग करना चाह सकते हैं।

मैं प्रतिक्रिया-जागरूक उम्मीद विकल्पों के लिए airbnb की चाई-एंजाइम का उपयोग करता हूं। इस उदाहरण में इसकी आवश्यकता नहीं थी।


स्वीकृत उत्तर के साथ समस्या यह है कि हम इसे जांचने में सक्षम होने के लिए अनावश्यक रूप से कुछ निर्यात कर रहे हैं। और परीक्षण करने के लिए सिर्फ एक वर्ग का निर्यात करना मेरी राय में एक अच्छा विचार नहीं है।

यहां कुछ भी निर्यात करने की आवश्यकता के बिना एक स्वच्छ समाधान है लेकिन कनेक्टेड घटक:

यदि आप जेस्ट का उपयोग कर रहे हैं, तो आप तीन चीजों को वापस करने के लिए connect विधि का नकल कर सकते हैं:

  1. mapStateToProps
  2. mapDispatchToProps
  3. ReactComponent

ऐसा करना बहुत आसान है। 2 तरीके हैं: इनलाइन मैक्स या ग्लोबल मैक्स।

1. इनलाइन मॉक का उपयोग करना

परीक्षण के वर्णन समारोह से पहले निम्नलिखित स्निपेट जोड़ें।

jest.mock('react-redux', () => {
  return {
    connect: (mapStateToProps, mapDispatchToProps) => (ReactComponent) => ({
      mapStateToProps,
      mapDispatchToProps,
      ReactComponent
    }),
    Provider: ({ children }) => children
  }
})

2. फ़ाइल नकली का उपयोग करना

  1. रूट में एक फ़ाइल __mocks__/react-redux.js बनाएँ (जहां package.json स्थित है)
  2. फ़ाइल में निम्न स्निपेट जोड़ें।

module.exports = {
  connect: (mapStateToProps, mapDispatchToProps) => (ReactComponent) => ({
    mapStateToProps,
    mapDispatchToProps,
    ReactComponent,
  }),
  Provider: ({children}) => children
};

मॉकिंग के बाद, आप Container.mapStateToProps , Container.mapDispatchToProps और Container.ReactComponent का उपयोग कर उपर्युक्त तीनों तक पहुंच पाएंगे। Container.ReactComponent

कंटेनर बस कर कर आयात किया जा सकता है

import Container from '<path>/<fileName>.container.js'

आशा करता हूँ की ये काम करेगा।

ध्यान दें कि यदि आप फ़ाइल मॉक का उपयोग करते हैं। jest.unmock('react-redux')) फ़ाइल का परीक्षण सभी परीक्षण मामलों के लिए वैश्विक रूप से किया जाएगा (जब तक कि आप परीक्षण मामले से पहले jest.unmock('react-redux')) करते हैं।





redux