Skip to content

Commit

Permalink
Add check for resolveWeak to next/dynamic (#33908)
Browse files Browse the repository at this point in the history
Fixes #33476

I've added the test for this but it passes either way, even when the change to loadable.js is not made. On the reproduction I was able to reproduce it consistently and it's fixed with this change. 



## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`
  • Loading branch information
timneutkens committed Feb 8, 2022
1 parent 6944074 commit 40329a7
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 3 deletions.
6 changes: 5 additions & 1 deletion packages/next/shared/lib/loadable.js
Expand Up @@ -96,7 +96,11 @@ function createLoadableComponent(loadFn, options) {

// Client only
if (!initialized && typeof window !== 'undefined' && !opts.suspense) {
const moduleIds = opts.webpack ? opts.webpack() : opts.modules
// require.resolveWeak check is needed for environments that don't have it available like Jest
const moduleIds =
opts.webpack && typeof require.resolveWeak === 'function'
? opts.webpack()
: opts.modules
if (moduleIds) {
READY_INITIALIZERS.push((ids) => {
for (const moduleId of moduleIds) {
Expand Down
51 changes: 49 additions & 2 deletions test/production/next/jest/index.test.ts
Expand Up @@ -8,9 +8,23 @@ describe('next/jest', () => {
beforeAll(async () => {
next = await createNext({
files: {
'components/comp.js': `
export default function Comp() {
return <h1>Hello Dynamic</h1>;
}
`,
'pages/index.js': `
import dynamic from "next/dynamic";
const Comp = dynamic(() => import("../components/comp"), {
loading: () => <h1>Loading...</h1>,
});
export default function Page() {
return <p>hello world</p>
return <>
<Comp />
<p>hello world</p>
</>
}
`,
'jest.config.js': `
Expand All @@ -27,11 +41,39 @@ describe('next/jest', () => {
// if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
moduleDirectories: ['node_modules', '<rootDir>/'],
testEnvironment: 'jest-environment-jsdom',
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
transform: {
// Use babel-jest to transpile tests with the next/babel preset
// https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
'^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
},
}
// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig)
`,
'jest.setup.js': `
// Learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom/extend-expect'
`,
'test/dynamic.test.js': `
import { render, screen, act } from "@testing-library/react";
import Home from "../pages/index";
describe("Home", () => {
it("renders a heading", () => {
act(() => {
render(<Home />);
const heading = screen.getByRole("heading", {
name: /Loading/i,
});
expect(heading).toBeInTheDocument();
});
});
});
`,
'test/mock.test.js': `
import router from 'next/router'
Expand All @@ -56,10 +98,15 @@ describe('next/jest', () => {
},
dependencies: {
jest: '27.4.7',
'@testing-library/jest-dom': '5.16.1',
'@testing-library/react': '12.1.2',
'@testing-library/user-event': '13.5.0',
},
packageJson: {
scripts: {
build: 'next build && yarn jest test/mock.test.js',
// Runs jest and bails if jest fails
build:
'next build && yarn jest test/mock.test.js test/dynamic.test.js',
},
},
buildCommand: `yarn build`,
Expand Down

0 comments on commit 40329a7

Please sign in to comment.