Jest: Failed to mock dynamic require call

[mrharel]

Not sure if this is a bug or a feature request, but i will describe the situation and what i expect.

I have the following file i need to test

// file mod1.js
export const fn1 = (val) => {
    return new Promise((res, rej) => {
        require(['./mod2'], (validate) => {
            res(validate(val));
        });
    });
}

and also

// file mod2.js
export const validate = (val) => !!val.length;

The test file is i created is something like this:

// file mod1.spec.js
test('mod1 should validate correcty', async () => {

    jest.mock('./mod2', () => ({ validate : jest.fn().mockImplementation(val => !!val.length) }));
    const fn1 = require('./mod1').fn1;
    const pass = await fn1("hello");
    expect(pass).toBe(true);
});

The problem is that the callback is not being called in the require method, so i get an timeout error:

Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.

If i remove the jest.mock line then i get the following error:

TypeError: moduleName.split is not a function

I can't change the mod1.js file, since the dynamic require call is intentionally for other reasons.

How can we test such configuration of modules?

Envoirnment

• babel-jest: "19.0.0"
• jest: "19.0.2"
• node: 7.2.1
• MacOS
• npm: 3.10.10

[aaronabramov]

hey @mrharel
sorry, i'm not familiar with dynamic requires.
where is this functionality coming from?

require(['./mod2'], (validate) => {
            res(validate(val));
        });

original node require takes only one argument and it's always a string, and so does Jest's implemenation of require, and i assume this is the reason your test is not working.

If you're using something else, then you'll probably need to mock the implementation of your require

[thymikee]

It looks like RequireJS – http://requirejs.org/

[mrharel]

@dmitriiabramov webpack creates chunks of code when it detects that you are requiring code dynamically. The issue is that this cannot be tested with jest.
I am not sure, but i think this was working when we used proxyrequire and this was broken when we switched from ava to jest.

[aaronabramov]

so is it some kind of trasform plugin that converts these calls to something else?

[mrharel]

you can learn more about it here: https://webpack.github.io/docs/code-splitting.html

[cpojer]

Please don't compile your code before running Jest on it. Jest should operate on your source files.

---

From: Amir Harel [e-mail]
Sent: Friday, March 31, 2017 2:47:15 AM
To: facebook/jest
Cc: Subscribed
Subject: Re: [facebook/jest] Failed to mock dynamic require call (#3219)

you can learn more about it here: https://webpack.github.io/docs/code-splitting.htmlhttps://urldefense.proofpoint.com/v2/url?u=https-3A__webpack.github.io_docs_code-2Dsplitting.html&d=DwMCaQ&c=5VD0RTtNlTh3ycd41b3MUw&r=aFhQMFmdCAmrM__WP0c73w&m=FAKuP04Vy5OUali4sc8hQOQJPoA471YBsvFQIBV-Mos&s=NG4bf30aYikXKPOYjF5LK8Gt7NquwQOu0Gh-E4ncrVs&e=

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHubhttps://github.com/facebook/jest/issues/3219#issuecomment-290488128, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AAA0KCL357Al88bFxISq4a-YkC88coktks5rq-qjgaJpZM4MrvlJ.

[axyz]

@cpojer at that point the code is not compiled, but the require with callback AMD style will be only correctly executed while compiling with webpack. When the test runs jest doesn't know how to use it.

This is a very common use case though. Don't know if there is some way to mock require itself... Otherwise there should be a way for jest to execute these async requires (or eventually require.ensure or system.import) correctly.

[SimenB]

You can use import('./mod2').then(validate => ()) and https://github.com/airbnb/babel-plugin-dynamic-import-node to have dynamic import work with jest.
Note that this required Webpack 2 to give code splitting

[msrose]

I'll hop in here with another babel-plugin based solution for requirejs users: babel-plugin-transform-amd-to-commonjs. I've got an example project which shows how you can get jest to require AMD files.

This solution is similar to using babel-plugin-dynamic-import-node (from what I understand), except you wouldn't have to change require([...], () => {}) to import(...).then(...).