React router context not updated when route is loaded through loadable

🐛 Bug Report

I have an app with react router and server side rendering. A route in certain cases adds values to the static context of react router. I was optimizing the route splitting, and I split the parent route that contained this route. This cause the context value on the server side to not get the values added by this component.

For reference I mean this:

https://reactrouter.com/web/guides/server-rendering/adding-app-specific-context-information

To Reproduce

load a route through loadable, and in that route modify context as described above.

Expected behavior

I expect the value to be modified.

Link to repl or repo (highly encouraged)

Please provide a minimal repository on GitHub.

Issues without a reproduction link are likely to stall.

Run npx envinfo --system --binaries --npmPackages @loadable/component,@loadable/server,@loadable/webpack-plugin,@loadable/babel-plugin --markdown --clipboard

Paste the results here:

## System:
 - OS: macOS 11.3
 - CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
 - Memory: 560.41 MB / 16.00 GB
 - Shell: 3.2.57 - /bin/bash
## Binaries:
 - Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
 - Yarn: 1.22.5 - ~/.yarn/bin/yarn
 - npm: 6.14.11 - ~/.nvm/versions/node/v14.16.0/bin/npm
 - Watchman: 4.9.0 - /usr/local/bin/watchman
## npmPackages:
 - @loadable/babel-plugin: ^5.13.2 => 5.13.2 
 - @loadable/component: ^5.14.1 => 5.14.1 
 - @loadable/server: ^5.14.2 => 5.14.2 
 - @loadable/webpack-plugin: ^5.14.2 => 5.14.2 

[kelly-tock]

ok, I got this working. I was initially not doing both the client and node extractors when under test, however I did additional route splitting that was exposing why I needed to do this. I am compiling both the client side code and the server side code in my case with webpack, then running the server side tests suite. I have non-compiled node code as well for basic middleware and what not that consumes the compiled with webpack app code. I am still a bit unclear as to why I need to compile the client side code as well, as this is running under node, but can debug that further and update in case others come across this. closing.

[kelly-tock]

Is there a guide to getting loadable working with jest? I made sure to sync up my babel config for my server side tests.

babel for jest:

module.exports = {
  plugins: ['@babel/plugin-syntax-dynamic-import', '@loadable/babel-plugin'],
  presets: [
    [
      '@tock/babel-preset-tock',
      {
        targets: {
          node: 'current',
        },
      },
    ],
  ],
};

preset is just a wrapper around preset-env and a few other things.

my jest test:

const supertest = require('supertest');
const app = require('../../src/server/server');

test('responds to /pizza/experience/123', (done) => {
  supertest(app).get('/pizza/experience/123456789').expect(404).end(done);
}, 60000);

if I make the route in question loadable, this test fails. with a regular import, it passes.