Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add check for resolveWeak to next/dynamic #33908

Merged
merged 2 commits into from Feb 8, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
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