2016-01-03 18 views
5

के साथ फ़ेच-मॉक काम करने में असमर्थ मेरे पास निम्न सेटअप है। मैं अभी के लिए अपने बैकएंड नकली करने की कोशिश कर रहा हूँ।वेबपैक और रेडक्स-प्रतिक्रिया

import * as types    from './../constants/actionTypes.jsx' 
import fetch     from 'isomorphic-fetch' 
var fetchMock = require('fetch-mock'); 
export function fetchEntry(entry){ 
    return dispatch => { 
     dispatch(requestEntry(entry)); 
     fetchMock 
      .mock(`http://localhost:8080/entry/${entry}`, {content: 'blah blah'}); 
     return fetch(`http://localhost:8080/entry/${entry}`) 
      .then(response => response.json()) 
      .then(json => dispatch(receiveEntry(entry, json))) 
      .catch(err => console.log(err)) 
    } 
} 

यह वह जगह है मैं कैसे मेरे webpack config सेटअप पर भाग होते हैं::

entry: { 
    app: path.resolve(__dirname, 'app/routes.jsx'), 
    vendor: [ 
     'react', 
     'react-dom', 
     'history', 
     'react-router', 
     'redux', 
     'react-redux', 
     'redux-simple-router', 
     'react-css-modules', 
     'alloyeditor', 
     'redux-form', 
     'react-toggle', 
     'react-select', 
     'isomorphic-fetch', 
     'redux-thunk', 
     'fetch-mock' 
    ] 
}, 
loaders: [ 
      { 
       test: /\.jsx?$/, 
       loader: 'babel', 
       exclude: /node_modules/, 
       query: { 
        presets: ['react', 'es2015'] 
       } 
      }, 

मैं वादा pollyfill के लिए babel-pollyfill उपयोग कर रहा हूँ

मैं इस प्रकार एक async redux कार्रवाई की है। यह import 'babel-polyfill' से ऊपर प्रविष्टि फ़ाइल (रूट.जेएसएक्स) में आवश्यक है और इस प्रकार bundle.js फ़ाइल के शीर्ष पर शामिल किया जा रहा है। ब्राउजर कंसोल में ग्लोबल के रूप में भी उपलब्ध है।

मैं देव के लिए सर्वर के रूप में webpack-dev-server --content-base build/ --inline --hot --progress --colors का उपयोग कर रहा हूं।

ब्राउज़र कंसोल में मुझे यूआरएल पर 404 मिल रहा है, ऐसा लगता है कि मार्ग अनुरोध को अवरुद्ध नहीं किया जा रहा है? GET http://localhost:8080/entry/1 404 (Not Found)। कैच से फेंकने वाली गलती निम्नानुसार है SyntaxError: Unexpected token C

धन्यवाद

संपादित:

मैं सिर्फ या तो कोई भाग्य के साथ काटने का निशान का उपयोग करने का प्रयास किया। मैंने बेबल-पॉलीफिल का उपयोग करने के लिए भी es6-वादे का उपयोग करने के लिए स्विच नहीं किया। मैंने विचारों से बाहर भाग लिया है क्योंकि यह fetch-mock अनुरोध को अवरुद्ध क्यों नहीं कर रहा है। मैं ऊपर fetchMock लॉग इन कंसोल और मार्ग परिभाषित किया गया है।

_calls: Object 
__proto__: Object 
_matchedCalls: Array[0] 
length: 0 
__proto__: Array[0] 
_unmatchedCalls: Array[0] 
isMocking: true 
mockedContext: Window 
realFetch:() 
routes: Array[2] 
0: Object 
__unnamed: true 
matcher: (url, options) 
name: "http://localhost:8080/entry/1" 
response: Object 
content: "blah blah" 
__proto__: Object 
__proto__: Object 
1: Object 
__unnamed: true 
matcher: (url, options) 
name: "http://localhost:8080/entry/1" 
response: Object 
content: "blah blah" 
__proto__: Object 
__proto__: Object 
length: 2 
__proto__: Array[0] 
__proto__: FetchMock 

क्रोम कंसोल में भी चलने के बाद निम्न कार्य उत्पन्न होता है। एक चर करने के लिए लाने के isomorphic

function mock(url, opts) { 
        var response = _this.router(url, opts); 
        if (response) { 
         debug('response found for ' + url); 
         return mockResponse(url, response); 
        } else { 
         deb… 
+0

आप इसे काम करने के लिए प्राप्त करने में सक्षम रहे हैं? – kioopi

उत्तर

10

मैं एक ऐसी ही समस्या कुछ authToken मिडलवेयर मैं लिखा था परीक्षण था और मुद्दा यह है कि मैं एक ही कर रहा था के रूप में आप का आयात किया गया था।

import fetch from 'isomorphic-fetch' 

यह समस्या थी। ऐसा करने का मतलब है कि आप वैश्विक स्तर पर लाने का एक उदाहरण उपयोग कर रहे हैं जो fetchMock को अवरोध से रोकता है।

आपको करना चाहिए।

import 'isomorphic-fetch' 

यह वैश्विक नामस्थान में लाएगा।

मैं भी fetchMock डॉक्स में इस चूक ...

हैं का उपयोग कर अपने स्रोत में isomorphic न लाएं, आप इसे एक चर लाने के लिए बताए रहे हैं? आप यानी आयात 'isomorphic न लाएं' नहीं होना चाहिए, नहीं आयात 'isomorphic न लाएं' से लाने की आवश्यकता होती है ('isomorphic न लाएं'), नहीं const लाने = की आवश्यकता होती है ('isomorphic न लाएं')

EDIT यदि आप क्लाइंट साइड कोड का परीक्षण कर रहे हैं तो वहां कुछ और महत्वपूर्ण जानकारी भी हैं। आपको fetch-mock निर्भरता में client.js का उपयोग करना चाहिए।

आप अपने webpack प्लगइन्स में एक मॉड्यूल प्रतिस्थापन परिभाषित करना चाहिए ...

plugins: [ 
    ... 
    new webpack.NormalModuleReplacementPlugin(/^fetch-mock$/, path.resolve(__dirname, 'node_modules', 'fetch-mock/es5/client.js')) 
]