2017-08-15 16 views
6

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

मैं कैसे सर्वर उपहास करने के लिए पर कुछ संकेत मिल गया है:

लेकिन वहाँ वास्तव में कैसे में इस मज़ाक उड़ाया सर्वर का उपयोग करने पर एक उदाहरण नहीं है मेरा ऐप परीक्षण सर्वर से टकराने से बचने के लिए।

मेरा लक्ष्य बात पर जोर देना है कि एप्लिकेशन वास्तव में काम कर रहा है सेटअप एकीकरण परीक्षण के लिए है:

describe('Profile feature',() => { 
    beforeAll(() => { 
    store = setupStore(); 
    app = mount(
     <ApolloProvider store={store} client={apolloClient}> 
     <ConnectedRouter history={history}> 
      <App /> 
     </ConnectedRouter> 
     </ApolloProvider> 
    ); 
    }); 
}); 

दुकान Redux उपयोग कर रहा है और ग्राहक इस तरह बनाया जा रहा है:

const networkInterface = createNetworkInterface({ 
    uri: process.env.REACT_APP_API_URL 
}); 

export const apolloClient = new ApolloClient({ 
    networkInterface 
}); 

कैसे कर सकते हैं मैं वास्तविक एपीआई के बजाय ग्राफक्ल-टूल्स के साथ एक मॉक किए गए सर्वर का उपयोग करता हूं?

उत्तर

11

मैं अपोलो-ग्राहक प्रश्नों के लिए मज़ाक उड़ाया डेटा बनाने के 2 अलग अलग तरीकों से पाया:

पहले graphql-tools उपयोग करने के लिए अपने बैकएंड स्कीमा के आधार पर एक मज़ाक उड़ाया सर्वर बनाने के लिए, क्रम में अपने परीक्षण के साथ इस मज़ाक उड़ाया सर्वर से कनेक्ट करने के लिए है वह इस तरह का mockNetworkInterface बनाने के लिए संभव है:

const { mockServer } = require("graphql-tools"); 
const { print } = require("graphql/language/printer"); 


class MockNetworkInterface { 
    constructor(schema, mocks = {}) { 
    if (schema === undefined) { 
     throw new Error('Cannot create Mock Api without specifying a schema'); 
    } 
    this.mockServer = mockServer(schema, mocks); 
    } 

    query(request) { 
    return this.mockServer.query(print(request.query), request.variables); 
    } 
} 

आप ApolloClient घटक को यह नेटवर्क इंटरफेस पारित कर सकते हैं और यह सिर्फ ठीक काम करना चाहिए!

इस सेटअप के बाद आपके क्लाइंट में आपकी एपीआई स्कीमा अद्यतित होने की आवश्यकता है, इसलिए मुझे इसे थोड़ा दर्द हुआ।

इस mockNetworkInterface द्वारा apollo-client/test-utils

प्रदान की उपयोग कर रहा है ऐसा करने का एक और तरीका है आप इसे इस तरह से उपयोग कर सकते हैं:

import { UserMock, PublicationMock } from '../__mocks__/data'; 
import { mockNetworkInterface } from 'react-apollo/test-utils'; 
import ApolloClient from 'apollo-client'; 

// We will be using here the exact same Query defined in our components 
// We will provide a custom result or a custom error 
const GraphQLMocks = [ 
    { 
    request: { 
     query: UserProfileQuery, 
     variables: {} 
    }, 
    result: { 
     data: { 
     current_user: UserMock 
     } 
    } 
    } 
]; 

// To set it up we pass the mocks to the mockNetworkInterface 
const setupTests =() => { 
    const networkInterface = mockNetworkInterface.apply(null, GraphQLMocks); 
    const client = new ApolloClient({ networkInterface, addTypename: false }); 

    const wrapper = mount(
    <ApolloProvider client={client}> 
     <App /> 
    </ApolloProvider> 
); 

    return { 
    store, 
    wrapper 
    }; 
}; 

// Then the tests look like this 
describe('Profile feature',() => { 
    test('Profile view should render User details', async() => { 
    const { wrapper, store } = setupTests(); 

    const waitFor = createWaitForElement('.profile'); 

    await waitFor(wrapper); 

    const tag = wrapper.find('.profile-username'); 
    expect(tag.text()).toEqual(`${UserMock.first_name} ${UserMock.last_name}`); 
    }); 
}); 

यह ApolloClient उदाहरण के लिए addTypename: false पारित करने के लिए महत्वपूर्ण है, अन्यथा आप की आवश्यकता होगी अपने सभी प्रश्नों के लिए मैन्युअल रूप से __typename जोड़ें।

आप mockNetworkInterface यहाँ के कार्यान्वयन का निरीक्षण कर सकते हैं: https://github.com/apollographql/apollo-test-utils/blob/master/src/mocks/mockNetworkInterface.ts

+1

आपके प्रश्न और उत्तर के लिए धन्यवाद! खोज के घंटों के बाद यह मुझे सही रास्ते पर रख दिया! –

+0

मदद करने में खुशी हुई, मैंने थोड़ी देर के लिए इसके साथ संघर्ष किया –

+0

@ करलोसमार्टिनेज जो आम तौर पर स्वीकार्य सर्वोत्तम अभ्यास या सर्वोत्तम समर्थित लाइब्रेरी/विकल्प है? – arcom

6

तुम भी MockedProvider है, जो इसे और भी आसान बना देता है का उपयोग कर सकते हैं।

withPersons.js

import { gql, graphql } from 'react-apollo' 

export const PERSONS_QUERY = gql` 
    query personsQuery { 
    persons { 
     name 
     city 
    } 
    } 
` 

export const withPersons = graphql(PERSONS_QUERY) 

withPersons.test।js

/* eslint-disable react/prop-types */ 

import React, { Component } from 'react' 
import { MockedProvider } from 'react-apollo/test-utils' 

import { withPersons, PERSONS_QUERY } from '../withPersons' 

it('withPersons', (done) => { 
    const mockedData = { 
    persons: [ 
     { 
     name: 'John', 
     city: 'Liverpool', 
     }, 
     { 
     name: 'Frank', 
     city: 'San Diego', 
     }, 
    ], 
    } 

    const variables = { cache: false } 

    class Dummy extends Component { 
    componentDidMount() { 
     const { loading, persons } = this.props.data 
     expect(loading).toBe(true) 
     expect(persons).toBe(undefined) 
    } 

    componentWillReceiveProps(nextProps) { 
     const { loading, persons } = nextProps.data 

     expect(loading).toBe(false) 
     expect(persons).toEqual(mockedData.persons) 
     done() 
    } 

    render() { 
     return null 
    } 
    } 
    const DummyWithPersons = withPersons(Dummy) 
    mount(
    <MockedProvider 
     removeTypename 
     mocks={[ 
     { 
      request: { query: PERSONS_QUERY, variables }, 
      result: { data: mockedData } }, 
     ]} 
    > 
     <DummyWithPersons /> 
    </MockedProvider>, 
) 
}) 

नोट: एक डमी घटक का उपयोग कर आप सिर्फ अपने graphql() जिज्ञासाएँ और उत्परिवर्तन और जिस तरह से आप उन्हें कॉन्फ़िगर किया गया परीक्षण (विकल्प, सहारा,, छोड़ चर, आदि) तो आप माउंट नहीं है अपने वास्तविक प्रतिक्रिया घटक। उन लोगों का परीक्षण करना बेहतर है जो उनके 'अनकनेक्टेड' राज्य में हैं।

+0

हाँ आप कर सकते हैं, मॉकप्रोवाइडर के साथ मेरी एकमात्र समस्या यह थी कि आप addTypename को पास नहीं कर सके: अंतर्निहित अपोलो क्लाइंट को झूठा, इसलिए आपके मैक्स को हर जगह __typename शामिल करना होगा। उन्होंने इस https://github.com/apollographql/react-apollo/pull/1001 –

+0

को ठीक करने के लिए खोला गया एक पीआर खोला वास्तव में आप प्रोप, लॉल, अच्छा –

+0

का उपयोग कर रहे हैं ओह, मैं देखता हूं, यह आपका प्रोप है! हाहा - मैंने केवल आज ही देखा – devboell

संबंधित मुद्दे

 संबंधित मुद्दे