Coder Social home page Coder Social logo

thekashey / proxyquire-webpack-alias Goto Github PK

View Code? Open in Web Editor NEW
3.0 3.0 0.0 15 KB

Modification of proxyquire to work with webpack aliases. Proxies commonjs require/es6 import in order to allow overriding dependencies during testing.

License: MIT License

JavaScript 100.00%

proxyquire-webpack-alias's Introduction

proxyquire-webpack-alias Build Status

NPM

Modification of proxyquire to work with webpack aliases. Proxies commonjs require/es6 import in order to allow overriding dependencies during testing. Just hides some webpack magic inside.

Proxyquire-webpack-alias has evolved into rewiremock. If you are looking for a better mocking library, not the way to fix proxyquire - you should try it.

API

import proxyquire, { configure } from 'proxyquire-webpack-alias';

configure('your-own-webpack-alias.conf');// optional

proxyquire
    .anyProxyquireCall()
    .load('alias/fileName', { 'alias/dep1':{} });
// you can use webpack-aliased filenames both as module name and stub name.

Now, at last, you can use aliases as names of deps to be mocked. So you can use old proxyquire in more modern way.

the other way:

If you prefer using original proxyquire - have a look in resolveQuire. It is pure functional sugar around it, and enables same features as proxyquire-webpack-alias.

proxyquire - 2

This library uses proxyquire-2, a bit more powerfull fork of original one. For details about proxyquire-2 API โ€“ see proxyquire documentation. It is just extends functionality, 100% compatible with old one.

rewiremock

From some point of view - you should stop using proxyquire. The better ways were invented. Including rewiremock.

API

  • configire(webpack.alias.conf) allows you to overwrite location of webpack.aliases configuration file. By default one will try to find 'webpack.config.js' or 'webpack.config.babel.js' in project root.
  • defaultExport - functional class, similar to Proxyquire.

Alias behavior similar to babel-plugin-webpack-alias. As long we take some sources from it.

Using proxyquire

So you have one file. You use webpack alises and address other files using them.

import something from 'something';
import somethingElse from 'core/something';
import somethingMore from 'components/something';

And then you want to mock deps with proxyquire. But you cant.

You have to mock relative imports. And each time you have to guess the right name.

const mocked = proxyquire('source.js',{
  'something': mock,
  '../../core/something': mock, // will not work, the right path is '../../../core....'
  'shared/something': something
})

So, this lets fix this issue.

//import proxyquire from 'proxyquire';
import proxyquire from 'proxyquire-webpack-alias'; 

// now, you can mock files as you import them.
const mocked = proxyquire('source.js',{
  'something': mock,
  'core/something': mock, 
  'components/something': something
});


// and, finnaly you can be sure, that you do something RIGHT.

// next example will trigger error
const mocked = proxyquire.noUnusedStubs().load('source.js',{
  'something': mock,
  'core/something': mock, 
  'component/something': something,// <-- typo. And stub will be unsued.
});

Your own setup

If you want to extend proxyquire, for example to setup it as you want, and use it indirectly - you have to add some magic

// so you are using special version of proxyquire
import proxyquire from 'my-proxyquire';

Where my-proxyquire.js is your file

import proxyquire from 'proxyquire-webpack-alias';

// this one creates `special` proxyquire for the file it use
const myProxyquire = 
    (new proxyquire.Class(module.parent))
     // now you can setup default behavior     
     .noUnusedStubs()
     .noPreserveCache()
     .noCallThru();

// and this prevent caching. So in new place you will get new class
delete require.cache[require.resolve(__filename)];

export default myProxyquire;

PS: This is not wrapper around proxyquire, this is wrapper around proxyquire-2.

proxyquire-webpack-alias's People

Contributors

thekashey avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

proxyquire-webpack-alias's Issues

Cannot import proxyquire

Hi,

It seems you module is not working.

I am trying to use it and get :

ERROR in xxx/node_modules/proxyquire-webpack-alias/proxyquire.d.ts (7,42): Cannot find name 'Proxyquire'.

ERROR in xxxxx (1,10): Module ''proxyquire-webpack-alias'' has no exported member 'proxyquire'.

ERROR in xxxxx (1,10): Module ''proxyquire-webpack-alias'' has no exported member 'proxyquire'.

As I simply did :

npm i proxyquire-webpack-alias --save-dev

and just added this line (and no more yet) at the top of one of my specfiles :

import { proxyquire } from 'proxyquire-webpack-alias';

For the record, I am using angular-cli.
It's too bad, your module seemed promising...

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.