रिले + प्रतिक्रिया

Question

पर परीक्षण रणनीति मैं इन दिनों प्रतिक्रिया + रिले + ग्राफक्ल के साथ प्रयोग कर रहा हूं। दुर्भाग्यवश, मुझे रिले कंटेनर द्वारा लिपटे प्रतिक्रिया घटक का परीक्षण करने का कोई आसान और सुविधाजनक तरीका नहीं मिल रहा है।

असल में, मैं इन लक्ष्यों को TDD साथ

1. ,
2. चर बदलें प्राप्त एक कंटेनर प्रस्तुत और उसकी सामग्री का परीक्षण करने और सामग्री पर अपने परिवर्तनों का परीक्षण करना चाहते हैं।

प्रतिक्रिया + फ्लक्स के साथ तुलना में, प्रतिक्रिया + रिले ब्लैक बॉक्स, या घोषणात्मक की तरह अधिक है।

मैं लोगों को रिले बाईपास करने के लिए रिले.क्रेट कंटैनर को देख सकता हूं और केवल प्रतिक्रिया घटक का परीक्षण कर सकता हूं। यह रिले भाग को खुलासा करता है और परीक्षण द्वारा इस भाग को ड्राइव तक कोई रास्ता नहीं है। https://github.com/facebook/relay/issues/161

इसके अलावा, मैंने रिले के परीक्षण मामलों के माध्यम से पढ़ा और यह वास्तव में एक नकली कंटेनर प्रस्तुत करने के लिए कठिन है। https://github.com/facebook/relay/blob/master/src/tools/mocks/RelayTestUtils.js

यदि आप समाधान साझा कर सकते हैं तो मैं वास्तव में आभारी रहूंगा।

धन्यवाद!

Answer 1

मैं रिले कंटेनर का परीक्षण करने की कोशिश कर रहा हूं जैसे कि मैं फ्लक्स एप्लिकेशन में घटक करता हूं। विशेष रूप से, मैं यह सुनिश्चित करना चाहता हूं कि वे किसी दिए गए राज्य और प्रोप के लिए सही सामग्री प्रस्तुत करें और वे उचित स्थानों पर डेटा बदलने के तरीकों को कॉल करें; फ्लक्स में यह एक एक्शन निर्माता के लिए एक कॉल है, रिले में यह Relay.Store.update या this.props.relay.setVariables पर कॉल है।

मेरा पहला प्रयास ऑब्जेक्ट renderContainerIntoDocument विधि के साथ बनाना था। मैंने इसे https://github.com/facebook/relay/blob/master/src/tools/mocks/RelayTestUtils.js, https://github.com/facebook/relay/blob/master/src/legacy/store/mocks/GraphQLStoreQueryResolver.js, और रिले कंटेनर परीक्षणों पर भारी रूप से आधारित किया। यह बहुत कम मजाकिया इस्तेमाल करता था और कंटेनर प्रतिपादन का परीक्षण करने के लिए बहुत अच्छा था लेकिन डेटा परिवर्तनों का परीक्षण करने के लिए पूरी तरह से बेकार था। Relay.Store.update और this.props.relay.setVariables पर कॉल पर जासूसी करने की कोशिश कर रहा है, या डेटा परिवर्तनों का नकल करने के लिए, यह मूल्यवान होने की तुलना में अधिक परेशानी बन गई।

मैं रिले को पूरी तरह से नकल करने के लिए __mocks__\react-relay.js जोड़ने और RelayTestUtils.renderContainerIntoDocument के सरल संस्करण का उपयोग करके कंटेनर में रिले गुणों को इंजेक्ट करने के लिए बस गया। मैं इस समाधान से पूरी तरह से संतुष्ट नहीं हूं, लेकिन ऐसा लगता है कि अब के लिए काम करना है।

__mocks__\react-relay.js:

var Relay = require.requireActual('react-relay'); 
var React = require('react'); 

module.exports = { 
    QL: Relay.QL, 
    Mutation: Relay.Mutation, 
    Route: Relay.Route, 
    Store: { 
    update: jest.genMockFn() 
    }, 
    createContainer: (component, containerSpec) => { 
    const fragments = containerSpec.fragments || {}; 

    // mock the static container methods 
    Object.assign(component, { getFragment: (fragmentName) => fragments[fragmentName] }); 

    return component; 
    } 
}; 

RelayTestUtils.js:

it('changes items',() => { 
    const myContainer = RelayTestUtils.renderContainerIntoDocument(
    <MyContainer { ...fragmentData }/>, 
    { variables: { itemId: 'asdf' } } 
); 
    myContainer.changeItem(); 
    expect(myContainer.props.relay.setVariables).toBeCalled(); 
}); 

Answer 2

मैं एक ने लिखा है:

const React = require('react'); 
const ReactDOM = require('react-dom'); 


const RelayTestUtils = { 
    renderContainerIntoDocument(containerElement, relayOptions) { 
    relayOptions = relayOptions || {}; 

    const relaySpec = { 
     forceFetch: jest.genMockFn(), 
     getPendingTransactions: jest.genMockFn().mockImplementation(() => relayOptions.pendingTransactions), 
     hasOptimisticUpdate: jest.genMockFn().mockImplementation(() => relayOptions.hasOptimisticUpdate), 
     route: relayOptions.route || { name: 'MockRoute', path: '/mock' }, 
     setVariables: jest.genMockFn(), 
     variables: relayOptions.variables || {} 
    }; 

    return ReactDOM.render(
     React.cloneElement(containerElement, { relay: relaySpec }), 
     document.createElement('div') 
    ); 
    } 
}; 

export default RelayTestUtils; 

टेस्ट कुछ इस तरह है, जहां fragmentData GraphQL प्रतिक्रिया के आकार से मेल खाता है देखो एक काम के खिलाफ जेस्ट का उपयोग कर रिले का परीक्षण कैसे करें, इसका ब्लॉग पोस्ट आईएनजी GraphQL बैकएंड: https://medium.com/entria/relay-integration-test-with-jest-71236fb36d44#.an74bdopy

इस रेपो https://github.com/sibelius/relay-integration-test शामिल परीक्षण के उदाहरण वेब प्रतिक्रिया और रिले