Create-react-app: Code spliting with webpack's require.ensure can't pass test

[suhaotian]

I want to learn write test in my app that build with create-react-app, but run npm test cause error:

[suhaotian]

The routes.js write like this:

export const routes = [
  {
    name: 'cool store',
    path: '/',
    exactly: true,
    load: asyncLoad((cb) => {
      require.ensure([], (require) => {
        cb(require('pages/home'))
      })
    }),
  },
  {
    name: 'login',
    path: '/login',
    exactly: true,
    load: asyncLoad((cb) => {
      require.ensure([], (require) => {
        cb(require('pages/login'))
      })
    }),
  },
]

[gaearon]

You can probably "polyfill" it in src/setupTests.js.
It's not a real Node feature (another reason we don't document it yet).
So you need to somehow make it work in Node.

[ctrlplusb]

If memory serves me correctly to solve this issue I had to polyfill require.ensure within each module that used the feature.

Something along the lines of...

if (!require.ensure) {
  require.ensure = (deps, cb) => cb(require);
}

[gaearon]

If memory serves me correctly to solve this issue I had to polyfill require.ensure within each module that used the feature.

Wouldn't putting

require.ensure = (deps, cb) => cb(require);

in src/setupTests.js solve this?

Longer term, we will support this out of the box if dynamic import advances.

[suhaotian]

Create src/setupTests.js and add these lines:

require.ensure = (deps, cb) => cb(require);

But didn't work :(

Put these lines to routes.js:

if (process.env.NODE_ENV === 'test') {
  require.ensure = (deps, cb) => cb(require);
  window.matchMedia = window.matchMedia || function() {
    return {
        matches : false,
        addListener : function() {},
        removeListener: function() {}
    };
  };
  window.Moltin = function(){}
}

pass test :)

[ctrlplusb]

Wouldn't putting

require.ensure = (deps, cb) => cb(require);

in src/setupTests.js solve this?

We would have hoped so, but I think the require instance that is provided to each module is unique.

[gaearon]

Oh that’s interesting, thanks for explaining.
I wonder if we can just hack support for require.ensure into Jest itself. cc @cpojer

[cpojer]

require.ensure is not part of CommonJS so I'm not interested in supporting it officially. The transformer (a custom version of babel-jest, which create-react-app is already using) could return something like require.ensure = (deps, cb) => cb(require); ${source} and that would work and I wouldn't mind supporting some kind of feature that makes this easier to integrate but I would probably not be happy shipping this by default.

[gaearon]

@suhaotian @ctrlplusb Would you be interested in sending a PR based on what @cpojer suggested?

[ctrlplusb]

@gaearon Sure thing, I'll give it a bash this w/end.

[Timer]

Closing this because require.ensure is no longer a supported behavior in master. Please switch to import() when 0.10 is released.
Since this has been a longstanding issue, I see no immediate need to mitigate this (it would have to be in a 0.9.x release anyway).

Feel free to re-open and tag as 0.9.x, @gaearon.