मोचा परीक्षणों में वेबपैक उपनाम का उपयोग

Question

मैं रिएक्ट/रेडक्स/वेबपैक में काम पर एक वेब ऐप विकसित कर रहा हूं और अब मोचा के साथ परीक्षण को एकीकृत करना शुरू कर रहा हूं।

मैंने the instructions for writing tests in the Redux documentation का पालन किया, लेकिन अब मैंने अपने वेबपैक उपनामों के साथ एक समस्या में भाग लिया है।

उदाहरण के लिए, मेरी कार्रवाई रचनाकारों में से एक के लिए इस परीक्षण के आयात खंड पर एक नज़र डालें: जैसा कि टिप्पणियों का सुझाव

import expect  from 'expect'     // resolves without an issue 
import * as actions from 'actions/app';   // can't resolve this alias 
import * as types from 'constants/actionTypes'; // can't resolve this alias 

describe('Actions',() => { 
    describe('app',() => { 
    it('should create an action with a successful connection',() => { 

     const host = '***************', 
      port = ****, 
      db = '******', 
      user = '*********', 
      pass = '******'; 

     const action = actions.createConnection(host, port, db, user, pass); 

     const expectedAction = { 
     type: types.CREATE_CONNECTION, 
     status: 'success', 
     payload: { host, port, database, username } 
     }; 

     expect(action).toEqual(expectedAction); 
    }); 
    }); 
}); 

, मोचा जब वे संदर्भित कर रहे हैं मेरी आयात बयानों को हल करने में सक्षम नहीं है अलियाड निर्भरताएं।

module.exports = { 
    devtool: 'eval-source-map', 
    entry: [ 
    'webpack-hot-middleware/client', 
    './src/index' 
    ], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle.js', 
    publicPath: '/static/' 
    }, 
    resolve: { 
    extensions : ['', '.js', '.jsx'], 
    alias: { 
     actions: path.resolve(__dirname, 'src', 'actions'), 
     constants: path.resolve(__dirname, 'src', 'constants'), 
     /* more aliases */ 
    } 
    }, 
    plugins: [ 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin() 
    ], 
    module: { 
    loaders: [{ 
     test: /\.js$/, 
     loaders: ['babel'], 
     exclude: /node_modules/, 
     include: __dirname 
    }] 
    } 
}; 

इसके अलावा, मैं मोचा चलाने के लिए आदेश npm test उपयोग कर रहा हूँ, यहाँ स्क्रिप्ट मैं अपने package.json में उपयोग कर रहा हूँ है:

क्योंकि मैं अभी भी webpack के लिए नया हूँ, यहाँ मेरी webpack.config.js है।

{ 
    "scripts": { 
    "test": "mocha ./src/**/test/spec.js --compilers js:babel-core/register --recursive" 
    } 
} 

तो यहां मैं कहां फंस गया हूं। मुझे वेबपैक से उपनामों को मोचा में चलाने की आवश्यकता होती है जब यह चलता है।

Answer 1

ठीक है इसलिए मुझे एहसास हुआ कि मैं जो कुछ भी अलियासिंग कर रहा था वह src/ निर्देशिका में था, इसलिए मुझे बस अपनी npm run test स्क्रिप्ट को संशोधित करने की आवश्यकता थी।

{ 
    "scripts": { 
    "test": "NODE_PATH=./src mocha ./src/**/test/spec.js --compilers js:babel-core/register --recursive" 
    } 
} 

शायद सभी के लिए काम नहीं करेगा, लेकिन यह मेरी समस्या का समाधान करता है।

Answer 2

मेरे पास एक ही समस्या थी। Require.js में या नोड की आवश्यकता में वेबपैक उपनामों का उपयोग करना असंभव प्रतीत होता है।

मैं इकाई परीक्षण में mock-require का उपयोग करने और सिर्फ इस तरह मैन्युअल रूप से पथ की जगह, समाप्त हो गया:,

var mock = require('mock-require'); 

mock('actions/app', '../../src/actions/app'); 

नकली की आवश्यकता होती है एक अच्छा उपकरण है क्योंकि सबसे अधिक संभावना है आप में से अधिकांश नकली करना चाहते हैं तो src से वास्तविक स्क्रिप्ट का उपयोग करने के बजाय वैसे भी निर्भरता।

Answer 3

मुझे लगता है कि मैंने इस समस्या को हल किया है। आपको 2 पैकेज का उपयोग करना चाहिए: mock-require और proxyquire।

मान लिया जाये कि आप इस तरह से एक जे एस फ़ाइल है:

app.js

import action1 from 'actions/youractions'; 

export function foo() { console.log(action1()) }; 

और अपने परीक्षण कोड इस तरह लिखना चाहिए:

app.test.js

import proxyquire from 'proxyquire'; 
import mockrequire from 'mock-require'; 

before(() => { 
    // mock the alias path, point to the actual path 
    mockrequire('actions/youractions', 'your/actual/action/path/from/your/test/file'); 
    // or mock with a function 
    mockrequire('actions/youractions', {actionMethod:() => {...})); 

let app; 
beforeEach(() => { 
    app = proxyquire('./app', {}); 
}); 

//test code 
describe('xxx',() => { 
    it('xxxx',() => { 
    ... 
    }); 
}); 

फ़ाइलों पेड़

app.js 
    |- test 
    |- app.test.js 

पहले नकली उर्फ ​​पथ द्वारा समारोह से पहले में नकली की आवश्यकता होती है, और beforeEach समारोह में proxyquire द्वारा अपने परीक्षण वस्तु नकली।

Answer 4

तुम भी एक कोलाहल प्लगइन मैं लेखक का उपयोग कर सकते हैं: https://github.com/trayio/babel-plugin-webpack-alias यह सिर्फ अपने .babelrc करने के लिए एक कोलाहल प्लगइन शामिल करके संबंधित पथ के लिए अपने aliased पथ परिवर्तित कर देंगे।

Answer 5

डैनी का जवाब बहुत अच्छा है। लेकिन मेरी स्थिति थोड़ा अलग है। मैंने src फ़ोल्डर के तहत सभी फ़ाइलों का उपयोग करने के लिए वेबपैक के resolve.alias का उपयोग किया।

resolve: { 
    alias: { 
    '-': path.resolve(__dirname, '../src'), 
    }, 
}, 

और इस तरह अपने खुद के मॉड्यूल के लिए एक विशेष उपसर्ग का उपयोग करें:

import App from '-/components/App'; 

इस मैं मोचा परीक्षण से पहले एक आदेश ln -sf src test/alias/- जोड़ सकते हैं और NODE_PATH=./test/alias चाल डैनी शिविर का उपयोग करने के लिए है की तरह कोड का परीक्षण करने के साथ में। तो अंतिम स्क्रिप्ट इस तरह होगा:

{ 
    "scripts": { 
    "test": "ln -sf src test/alias/-; NODE_PATH=./test/alias mocha ./src/**/test/spec.js --compilers js:babel-core/register --recursive" 
    } 
} 

---

पुनश्च:

मैं - इस्तेमाल किया क्योंकि @ या ~ तरह beautifal charactors पर्याप्त सुरक्षित नहीं हैं। मुझे सुरक्षित वर्णों का उत्तर मिला here

Answer 6

मुझे भी एक ही समस्या का सामना करना पड़ा, लेकिन इस प्लगइन के साथ मैंने इसे हल किया।

https://www.npmjs.com/package/babel-plugin-webpack-aliases

अपने "मोचा" के निष्पादन के आदेश webpack.config.js पढ़ नहीं है, इसलिए यह उर्फ ​​का समाधान नहीं कर सकते हैं।
इस प्लगइन को सेट करके, "babel-core/register" के साथ संकलित करते समय webpack.config.js पर विचार करें। नतीजतन, उपनाम परीक्षण के दौरान भी वैध होगा।

npm i -D babel-plugin-webpack-aliases 

और .babelrc

{ 
    "plugins": [ 
     [ "babel-plugin-webpack-aliases", { "config": "./webpack.config.js" } ] 
    ] 
}