plasticine / inject-loader Goto Github PK

I can't get this to work when loading AMD modules, but works fine for CommonJS and ES6 modules. Is this a known issue?

I have npm library request-promise and am importing as so at the top of a NodeJS file:

import * as original_request from 'request-promise';

Exported function that uses this as seen here:

return original_request({
        uri: myUri,
        method: 'POST',
        form: {
            userName: username,
            password: password
        }
    }).then(resp => {
        // Do more logic
    });

In test file I am mocking out like this:

injector({
     'request-promise': () => [{id: '12345'}]
})

Getting error: TypeError: original_request(...).then is not a function

I think I need to change the request-promise function in injector but I am not sure how to structure it. I've tried doing () => Promise.resolve([{id: '12345'}]) but that gives me error JavaScript SyntaxError{} (no information with it)

This pull request resulted in the 'real' module being loaded if it wasn't mocked out #7

Ideally this should be configurable - and present a warning that the module isn't being mocked out.

There should also be some documentation around this as it's not clear the changes on upgrading from 1.0.0 to 2.0.1.

I have tried in three different solutions and can't seem to get inject-loader to work. I even downloaded the example you provided, did a npm install and then npm run test and get the same error.

I am sure it is something that I am misunderstanding and would appreciate any guidance.

Tried the simplest of cases, something like

const injector = require('inject-loader!./SomeModule')

Got the below exception

Cannot find module 'inject-loader!./ExerciseExternalView' from 'ExerciseExternalView.spec.js'

  at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:191:17)

Not sure if inject-loader is supposed to work with RN?

So far working with inject-loader has been great, but I found that source maps don't produce the right line numbers for injected modules. I'm running ES6 code through babel and using inject-loader to mock out dependencies for testing.
I was able to get something working by joining lines with spaces instead of \n and just passing the provided source map (second argument) back in this.callback. This isn't really right - the source map really needs a transform applied?

module.exports = function inject(src, sourceMap) {
  this.cacheable && this.cacheable();
  var regex = createRequireStringRegex(loaderUtils.parseQuery(this.query));

  var lines = [
    'module.exports = function inject(injections) {',
    'var module = {exports: {}};',
    'var exports = module.exports;',
    src.replace(regex, "(injections[$1] || $&)"),
    'return module.exports;',
    '}'
  ];

  if (sourceMap) {
    this.callback(null, lines.join(" "), sourceMap);
  } else {
    return lines.join("\n");
  }
}

In one of my tests, I wish to inject an falsey export. That is, I want to see what module A does when it requires module B and module B exports undefined, null, or false. Unfortunately, inject-loader outputs something like this:

var visitorIdInstance = (injections['../sharedModules/mcidInstance'] || __webpack_require__(47));

Given that the injection is falsey, it doesn't use my injection and instead uses the real module which makes my test useless.

Regression of #15.

In one of my tests, I wish to inject an falsey export. That is, I want to see what module A does when it requires module B and module B exports undefined, null, or false. Unfortunately, inject-loader outputs something like this:

...
	  function __getInjection(dependency) {
	    return __injections.hasOwnProperty(dependency) ? __injections[dependency] : null;
	  }

	  (function () {
	    var mcidInstance = __getInjection("../sharedModules/mcidInstance") || __webpack_require__(4); /**
...

So even though __getInjection returns null, || __webpack_require__(4); overrides it anyway.

please take a look at #18

After running npm install inject-loader --save-dev I get this when I try use the loader through require:

const inject = require('inject!../../server')

Is there anything else that needs to be configured?

Webpack 1.13 and babel 6.2.4

loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /(node_modules|server)/,
        query: {
          cacheDirectory: true,
          presets: ["es2015", "react", "stage-0"]
        }
      },

Do not use import syntax to configure webpack loaders.
shows this error message with create-react-app version 1.3.0 and fails the test

I saw this commit which adds basic Webpack 3 compatibility — 313f796#diff-b9cfc7f2cdf78a7f4b91a753d10865a2 — however, this change hasn't been released to NPM. Is there anything that's preventing this from being released?

This package is the last piece of the puzzle before we can update https://github.com/vuejs-templates/webpack for Webpack 3 compatibility; ref: vuejs-templates/webpack#751

Trying to work with a webpack bundle using babel to compile ES6 files and work with:

import DefaultExport from './File';

The inject loader doesn't work and ends up with:

TypeError: Cannot read property 'default' of undefined
    at inject (webpack:///./File.es6?./~/inject-loader:5:91)
    at Context.eval (webpack:///./test/File.es6?:19:17)

Hi!

I try to use inject-loader on a following file:

import AuthResource from './../../resources/auth/Auth';
import { REMOVE_TOKEN, SET_TOKEN } from '../actions';

export default {
// ...
};

with code

const actionsInjector = require('inject!./actions');

and an error appears

ERROR in ./~/inject-loader/dist!./resources/assets/js/store/auth/auth.js
Module parse failed: /home/megapixel23/Projects/vue-demo/node_modules/inject-loader/dist/index.js!/home/megapixel23/Projects/vue-demo/resources/assets/js/store/auth/auth.js 'import' and 'export' may only appear at the top level (26:6)
You may need an appropriate loader to handle this file type.
|     (function () {
|       // $FlowIgnore
|       import AuthResource from './../../resources/auth/Auth';
| import { REMOVE_TOKEN, SET_TOKEN } from '../actions';
| 
 @ ./resources/assets/js/store/auth/auth.spec.js 2:24-58

Seems like es6 import syntax does not work in inject-loader

I often use lodash. When I have a file with 5 dependencies where I want to mock everything but lodash I currently need to specify all other 4 dependencies explicitly: inject?lib1&lib2&lib3&lib4!testable. Therefore it would be great if the plugin could have some kind of global configuration to always exclude libraries like lodash.

Hello!
In my scenario I have a file a.js requiring b.js which requires c.js
I want to mock c.js when I require a.js

Is it possible? So far I was only able to mock c.js if I mock b.js directly...

Thank you!

Calling require() with dynamically formed paths leads to runtime issue with webpack:

const module = require(`\${ENTRY_POINT}\any-module.js`);

Throws the following issue with webpack 3 at runtime:

 Uncaught Error: Module build failed: TypeError: Property value expected type of string but got null
      at Object.validate (/Users/andrevale/workspace/canvas/node_modules/babel-types/lib/definitions/index.js:161:13)
      at validate (/Users/andrevale/workspace/canvas/node_modules/babel-types/lib/index.js:505:9)
      at Object.builder (/Users/andrevale/workspace/canvas/node_modules/babel-types/lib/index.js:466:7)
      at /Users/andrevale/workspace/canvas/node_modules/inject-loader/dist/index.js:1:2733
      at CallExpression (/Users/andrevale/workspace/canvas/node_modules/inject-loader/dist/index.js:1:2853)
      at NodePath._call (/Users/andrevale/workspace/canvas/node_modules/babel-traverse/lib/path/context.js:76:18)
      at NodePath.call (/Users/andrevale/workspace/canvas/node_modules/babel-traverse/lib/path/context.js:48:17)
      at NodePath.visit (/Users/andrevale/workspace/canvas/node_modules/babel-traverse/lib/path/context.js:105:12)
      at TraversalContext.visitQueue (/Users/andrevale/workspace/canvas/node_modules/babel-traverse/lib/context.js:150:16)
      at TraversalContext.visitSingle (/Users/andrevale/workspace/canvas/node_modules/babel-traverse/lib/context.js:108:19)
      at TraversalContext.visit (/Users/andrevale/workspace/canvas/node_modules/babel-traverse/lib/context.js:192:19)
      at Function.traverse.node (/Users/andrevale/workspace/canvas/node_modules/babel-traverse/lib/index.js:114:17)
      at NodePath.visit (/Users/andrevale/workspace/canvas/node_modules/babel-traverse/lib/path/context.js:115:19)
      at TraversalContext.visitQueue (/Users/andrevale/workspace/canvas/node_modules/babel-traverse/lib/context.js:150:16)
      at TraversalContext.visitMultiple (/Users/andrevale/workspace/canvas/node_modules/babel-traverse/lib/context.js:103:17)
      at TraversalContext.visit (/Users/andrevale/workspace/canvas/node_modules/babel-traverse/lib/context.js:190:19)

@plasticine, Do you have any plan to make the package compatible with Typescript?
It would be nice if it does support TS.
Basically, I want to use this in my Vue 3 and TS project to test my Vuex action and mutation.
Thanks

Webpack 4 is already landed https://github.com/webpack/webpack/releases. Please add it to peerDependencies of this module.

This repository is great and I'm using it myself.

But I feel it would be better to have more tests, with different scenarios, so that the project would increase in reliability.

Tests that would be good:

• Tests for different versions of webpack;
• Edge cases;

Please let me know if I can help.

I'm seeing this issue:

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  Error: Module parse failed: /Users/adamyonk/Code/spaces/node_modules/inject-loader/dist/index.js!/Users/adamyonk/Code/spaces/node_modules/coffee-loader/index.js!/Users/adamyonk/Code/spaces/app/assets/javascripts/views/multi_dimensional/chart_stream.coffee 'import' and 'export' may only appear at the top level (29:4)
  You may need an appropriate loader to handle this file type.
  |
  |   (function () {
  |     import defer from 'lodash/defer';
  |     import extend from 'lodash/extend';
  |     import isEqual from 'lodash/isEqual';
  at tests/tests.webpack.js:239466

Babel config:

{
  "plugins": [
    "lodash",
    "react-hot-loader/babel"
  ],
  "presets": [
    "react",
    "env",
    "stage-1"
  ]
}

I have this loader in my webpack config:

        {
          test: /\.coffee$/,
          use: [ { loader: 'coffee-loader' } ],
        },

And I'm trying to use inject-loader like so:

injector = require('inject-loader!views/multi_dimensional/chart_stream')
view = injector({
  ...
})

I assume this has to do with essentially doing 'inject-loader!coffee-loader!myfile'. Do you have any guidance for how to configure this in a project that is also using coffee-loader (or some other lang-loader)? Thank you!

karma-phantomjs-launcher is currently listed as a dependency of inject-loader which causes npm warnings for projects that do not use karma. I believe this can be resolved by moving it to the devDependencies list.

└─┬ [email protected]
  ├── UNMET PEER DEPENDENCY karma@>=0.9
  └─┬ [email protected]
    └─┬ [email protected]
      ├── [email protected]
      ├─┬ [email protected]
      │ ├─┬ [email protected]
      │ │ └── [email protected]
      │ ├── [email protected]
      │ ├── [email protected]
      │ └─┬ [email protected]
      │   └─┬ [email protected]
      │     └── [email protected]
      ├── [email protected]
      ├── [email protected]
      ├── [email protected]
      └─┬ [email protected]
        └── [email protected]

npm WARN [email protected] requires a peer of karma@>=0.9 but none was installed.

Hi there!

Just wanted to point out that inject-loader doesn't work properly with Babel 7.

Running my tests suite I get this error whenever inject-loader is imported in my tests:

Module parse failed: 'import' and 'export' may only appear at the top level (975:4)
You may need an appropriate loader to handle this file type.

Maybe is due to the hardcoded usage of the deprecated babel-core module inside inject-loader? 🤔

Hey Mate,
Just passing by to say that your lib is amazing!

Keep up the good work.

Thanks for this nice library.
Is there any chance of adding support for injecting transitive dependencies ?

Module A ----imports ----> Module B ----imports ----> Module C
I want to be able to mock Module C when testing Module A.

We're starting to use this on a project and noticed that the last merge which hasn't been published to npm does what we'd like inject-loader to do. We are considering forking inject-loader so that we can get more tests written, but would be easier to just keep pushing this project forward.

I used inject-loader with webpack 1.x and it functioned perfectly. Porting the code to webpack 2 gives some funny errors.

If I change the code to use require("inject-loader!... I get errors like so:

ERROR in ./~/inject-loader/lib!./source/ccc/CCCProxy.js
Module parse failed: /home/user/work/my-project/node_modules/inject-loader/lib/index.js!/home/user/work/my-project/node_modules/babel-loader/lib/index.js!/home/user/work/my-project/source/ccc/CCCProxy.js 'import' and 'export' may only appear at the top level (30:0)
You may need an appropriate loader to handle this file type.
|  * @created 2015-08-25
|  */
| import CustomObject from "core/CustomObject";
| import CCCResponse from "ccc/CCCResponse";
| import CCCManagerLocator from "misc/locators/CCCManagerLocator";
 @ ./test/specs/ccc/CCCProxy.spec.js 27:29-66
 @ ./test \.spec\.js$
 @ ./test/index.js

If I leave it as "inject!..., I get other errors:

ERROR in ./test/specs/ccc/CCCProxy.spec.js
Module not found: Error: Can't resolve 'inject' in '/home/user/work/my-project/test/specs/ccc'
 @ ./test/specs/ccc/CCCProxy.spec.js 27:29-59
 @ ./test \.spec\.js$
 @ ./test/index.js

I'm using Node 6.8 with Webpack 2.1.0-beta.26. I've tried inject-loader 2.0.1 and v3 beta. My code is es6 using import/export being transpiled with babel 6. All code is transpiled correctly to commonjs format which I can confirm by checking the output.

Repro:
'../path/to/module': { default: someDefaultMock, named: someNamedMock },

This code works with just the default or named modules, however, using both in conjunction causes the default import to fail.

Temporary workaround:
Instead of only using export default on your current default module, export it as both a default and named export, eg named2. Then you can import all your modules as named modules and the imports will work:

'../path/to/module': { named2: someDefaultMock, named: someNamedMock },

I am not 100% which side is the best to resolve this issue since there are multiple plugins involve. However, I do want to report this so the maintainer and other users are aware of this problem.

First, our setup is:

• webpack
• karma + mocha
• Istanbul
• inject-loader
• istanbul-instrumenter-loader

The istanbul-instrumenter-loader was used to hook each module to Istanbul.

Now, when test package requires both a module, and an injected version of the same module. I'm getting exceptions from Istanbul. On the surface, the issue is caused by a mismatch between statements and statementMap, two internal variables of Istanbul to record statements and the location of them in the file. The length of the two didn’t agree. One recorded more statements than the other for "the same file".

I did some debugging and I believe this is what's happening:

1. inject-loader will add statements to the module for the injection
2. istanbul-instrumenter-loader registers both the original file and the injected version to Istanbul understand the same file name

The two functions, under the same name, have different statement count, led to the issue.

I also provided this info to Istanbul under gotwarlost/istanbul#192.

./~/inject-loader!../src/pages/calculators/module-ray-tracer/calc-module-ray-tracer/turboSimJobManager.js
Module parse failed: C:\Users\sudsy\Development\gen3\PVL.Content\tests\node_modules\inject-loader\index.js!C:\Users\sudsy\Development\gen3\PVL.Content\src\pages\calculators\module-ray-tracer\calc-module-ray-tracer\turboSimJobManager.js 'import' and 'export' may only appear at the top level (4:0)
You may need an appropriate loader to handle this file type.
| var module = {exports: {}};
| var exports = module.exports;
| import {Observable} from 'rxjs/Observable';
| import auth from "authentication";
| import connMgr from "modules/connection-manager/connection-manager";
@ ./unit-mocha/modules/SimJobManager/testTurboSimJobManager.js 3:0-110
@ ./unit-mocha/modules/SimJobManager/testTurboSimJobManager.js
@ multi main

Can't get this working with Jest. Got a

Cannot find module 'inject-loader!...

To quote #23:

Hello!
In my scenario I have a file a.js requiring b.js which requires c.js
I want to mock c.js when I require a.js

Is it possible? So far I was only able to mock c.js if I mock b.js directly...

Thank you!

Has this become possible in the last 4.5 years?

If not, what is advised here? Can this be worked around? Or does a different package have this feature?

I'm using mocha and execute my tests like so:

cross-env NODE_ENV=test ./node_modules/mocha/bin/mocha --compilers js:babel-core/register --recursive

My package.json looks like this.

Should this setup work with inject-loader?

Thanks

Lewis

Hi, I've just upgraded from Babel 5.3.3 to Babel 6.9.0 and a lot of my tests stopped working.
I'm using latest jasmine (2.4) with karma test runner and webpack as a preprocessor.

// my package.json setup
"babel-core": "6.9.0",
"babel-loader": "6.2.4",
"babel-preset-es2015": "6.9.0",
"babel-preset-react": "6.5.0",
"babel-preset-stage-0": "6.5.0",
"babel-plugin-transform-decorators-legacy": "1.3.4",
"inject-loader": "2.0.1",

Do you have any idea where is the problem? My guess is it's because inject-loader was written for Babel 5 but wasn't upgraded for babel 6 yet. Is that right?

Something like:

require(inject?lib/dispatcher!stores/my_store)

Will only inject a dependency for the requirement of lib/dispatcher inside stores/my_store.

Can I use it with ts-loader? Give an example, please.

Hello,

I've noticed that inject-loader cannot correctly process $' combination in files.

Given the following code:

define(function (require) {
    'use strict';

    var _ = require('lodash');
    var regexp = new RegExp('^(one|two|three)$', 'i');

    return {
        getRegex: _.constant(regexp)
    };
});

I've got the following output:

module.exports = function __injectWrapper() {
    var __injections = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

    var module = { exports: {} };
    var exports = module.exports;

    // $FlowIgnore
    var __wrappedModuleDependencies = ["lodash"];

    (function __validateInjection() {
      var injectionKeys = Object.keys(__injections);
      var invalidInjectionKeys = injectionKeys.filter(function (x) {
        return __wrappedModuleDependencies.indexOf(x) === -1;
      });

      if (invalidInjectionKeys.length > 0) throw new Error('One or more of the injections you passed in is invalid for the module you are attempting to inject into.\n\n- Valid injection targets for this module are: ' + __wrappedModuleDependencies.join(' ') + '\n- The following injections were passed in:     ' + injectionKeys.join(' ') + '\n- The following injections are invalid:        ' + invalidInjectionKeys.join(' ') + '\n');
    })();

    function __injection(dependency) {
      return __injections.hasOwnProperty(dependency) ? __injections[dependency] : null;
    }

    /*!************************************************************************/
    (function () {
      // $FlowIgnore
      'use strict';

define(function (require) {
    'use strict';

    var _ = (__injection("lodash") || require("lodash"));
    var regexp = new RegExp('^(one|two|three)
    })();
    /*!************************************************************************/

    return module.exports;
  }, 'i');

    return {
        getRegex: _.constant(regexp)
    };
});
    })();
    /*!************************************************************************/

    return module.exports;
  }

This part is broken:

    var regexp = new RegExp('^(one|two|three)
    })();

Any questions - please let me know.
P.s. And many thanks for this package, it's a real life-saver for me 👍

In version 3.0.1 this PR #38 disabled babelrc file configs which doesn't compile my code correctly.

Aside from the compact option, I also added the filename option to assist in debugging Babel messages like the one I encountered (without the filename, it falls back to "unknown"). Adding filename means we also have to set babelrc: false to prevent it from trying to look up an external config file (which can interfere with inject-loader).

Does this option need to be false or is there another way to include my babel config? Using the env option in babelrc we can set up a different environment for testing that doesn't interfere with "filename".

When attempting to install with Webpack version 5.x:

ERR!
Found: [email protected]
node_modules/webpack
dev webpack@"^5.54.0" from the root project

Could not resolve dependency:
peer webpack@"^1 || ^2 || ^3 || ^4" from [email protected]

Given:

var MyStoreProxy = require('inject?lib/dispatcher!stores/my_store')

Should raise an error:

var Dispatcher = MyStoreProxy()

Shouldn’t error:

var StubDispatcher = {};
var MyStore = MyStoreProxy({'lib/dispatcher': StubDispatcher})

I am not having any success in using inject-loader in my project. I keep getting cannot find module 'inject-loader!../myModule'. I was using webpack 1, and I updated to webpack 2 but has not made any difference. I tried including some of the settings in my webpack.config from the examples and it did not work (and caused other module to not be found). I noticed that I get the same error in RunKit (https://npm.runkit.com/inject-loader) if I try, for example require('inject-loader!fs) or any node module on npmjs. What am I doing wrong? I've attached a simple example that causes my error.

Archive.zip

When I try to upgrade from 2.x to 3.0.0-beta1 I start getting the following errors:

ERROR in Loader /Users/aahardy/dev/extension-support-testrunner/node_modules/inject-loader/lib/index.js didn't return a function
 @ ./src/lib/actions/__tests__/setCustomerIds.test.js 4:29-64

ERROR in Loader /Users/aahardy/dev/extension-support-testrunner/node_modules/inject-loader/lib/index.js didn't return a function
 @ ./src/lib/sharedModules/__tests__/mcidInstance.test.js 4:32-65

I'm guessing it has to do with the es6 modules in 3.x or something.

I tried inject-loader with Typescript and Istanbul coverage.

For the code:

import getFoo from 'getFoo';

The inject-loader adds a logical or-expression. The result looks like:

var getFoo_1 = __getInjection("getFoo") || __webpack_require__(2);

If the depedency is mocked in all tests and the actual module is never used, the right side of the or-expression is never executed. This results in an uncovered branch in the coverage report.