TypeError: require.resolveWeak is not a function (jest test)

[Emiliano-Bucci]

Bug report

Describe the bug

There's an error when trying to test a component which contains a dynamic imported component. The error i get is TypeError: require.resolveWeak is not a function.

To Reproduce

1. Clone the repo https://github.com/Emiliano-Bucci/jest-with-dynamic-import- (it's a fork of the repo with-jest example)
2. Run tests

Expected behavior

It should be possible to test components which contains dynamic imported components, or dynamic components itself.

Screenshots

System information

• OS: macOS 11.0.1
• Browser: Chrome 87.0.4280.88
• Version of Next.js: 10.0.3
• Version of Node.js: 12.14.1
• Deployment: Vercel

[Emiliano-Bucci]

UPDATE: Sorry, the repo wasn't reachable; now it's fixed!

[andrewmclagan]

Taking a crack at this. Okay as this is my first PR to the core I have some questions on approach:

• Is it ok to do a check for test environment?

My approach would be to check for test environment and simply return the component synchronously.

[timneutkens]

You can add this to the babel plugin in packages/next/build/babel/plugins/react-loadable-plugin.ts:

const isBabelLoader = api.caller(
    (caller: any) => !!caller && caller.name === 'babel-loader'
  )

And then opt out of generating the webpack specific code. Particularly this part:

t.objectProperty(
                  t.identifier('webpack'),
                  t.arrowFunctionExpression(
                    [],
                    t.arrayExpression(
                      dynamicImports.map((dynamicImport) => {
                        return t.callExpression(
                          t.memberExpression(
                            t.identifier('require'),
                            t.identifier('resolveWeak')
                          ),
                          [dynamicImport]
                        )
                      })
                    )
                  )
                ),

Note that this is always going to result in a loading state for next/dynamic component but would get rid of the error that you currently see.

[andrewmclagan]

That's a passable solution. The testing strategy would be to assert the async component was rendered, then have any further coverage inside the component itself.

[robinpiets]

Any progress on this issue?

[vojto]

Related? #5416

Here's another issue which covers similar scenario, but that one got resolved recently: #24566

That one covers case with ssr: false:

const SomeDynamicComp = dynamic(() =>
  import('./some-dynamic-comp').then((mod) => mod.SomeDynamicComp),
{ ssr: false })

This one still fails, because the testing project attempts it without {ssr: false}:

const SomeDynamicComp = dynamic(() =>
  import('./some-dynamic-comp').then((mod) => mod.SomeDynamicComp))