Tests with nested dependencies and import-loader

169 views
Skip to first unread message

Simon Bächler

unread,
Dec 11, 2014, 4:49:24 AM12/11/14
to jes...@googlegroups.com
Hi

I have a react module that uses a jQuery plugin. The Plugin exports to the global namespace so I use the imports and exports loader to load it.
Jest fails with this message: 
Cannot find module 'imports?jQuery=jquery!exports?FlipClock!../bower_components/FlipClock/compiled/flipclock.js' from '/Users/sb/projects/myproject/app/static_src/game'

The 'clock.jsx' module looks like this:

var React = require('react');
var FlipClock = require('../flipclock.js');
module.exports = React.createClass({
....
})


The 'flipclock.js' is a wrapper to load the jQuery plugin. There is some more code to extend the plugin which is omitted here:

var $, jQuery;
jQuery = $ = require('jquery');
var FlipClock = require('imports?jQuery=jquery!exports?FlipClock!../bower_components/FlipClock/compiled/flipclock.js');
...
module.exports = FlipClock;


The 'clock-test.js' then looks like this:

jest.dontMock('../clock.jsx');

describe('clock', function(){
  var React = require('react/addons');
  var Clock = require('../clock.jsx');
  var TestUtils = React.addons.TestUtils;
  it('can show the current score', function() {....})
})

The whole flipclock module should be mocked. I think the error occurs during the creation of the mock. 

I have tried adding the require and module.exports statement to the jQuery plugin. The creation of the mock seems to work but the mock is not correctly set up. It does not have the 'setTime' method the original plugin has.
This would also mean that I could not update the plugin anymore.

What is the best way to mock this plugin?

Regards
Simon

binh...@gmail.com

unread,
Jan 9, 2015, 4:18:16 PM1/9/15
to jes...@googlegroups.com
I have a similar problem. Want to test a component that contains less-loader css-loader any work-a-round?

Simon Bächler

unread,
Jan 10, 2015, 5:52:44 AM1/10/15
to jes...@googlegroups.com
I got it to work by modifiying the original jQuery plugin and adding a module exports statement at the end.

I also completely decoupled the FlipClock object by using a proxy class to interact with it, which I could mock for the tests.

Regards

Simon
Reply all
Reply to author
Forward
0 new messages