Adapter for NextJS + NextJS example

[thanhsonng]

Issue: #33

Features

• Create a Next.js adapter for Jest configuration, maybe nextJestPreview currently named enableJestPreview

Chores

• Make jest-preview work with Next.js (using Next.js compiler written in Rust)
• Make jest-preview work with Next.js (using Babel)
• (This issue Next.js Image component doesn't work #62 be handled in future PRs) Make Next's <Image /> work (Normally, Image is lazy and will only load when entering viewport. When run by jest-preview, it never loads)
• Create a README for Next.js example

Misc.

• Include nodemon as a dev dependency of jest-preview

[nvh95]

I think your PR is great so far. Thank you very much. Let's extract your customize implementation to a function and use rollup to bundle it.
It should have typing support so we might need to modify our building process a little bit.

[nvh95]

Can you add a comment in which case config is not an object?

[thanhsonng]

Ok

[nvh95]

@thanhsonng We do not need the logic if (typeof config === 'object') anymore, don't we?

[nvh95]

Just add a reference on default Next's Jest Config here

{
  setupFilesAfterEnv: [ '<rootDir>/jest.setup.js' ],
  moduleNameMapper: {
    '^.+\\.module\\.(css|sass|scss)$': '/my_folder/node_modules/next/dist/build/jest/object-proxy.js',
    '^.+\\.(css|sass|scss)$': '/my_folder/node_modules/next/dist/build/jest/__mocks__/styleMock.js',
    '^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$': '/my_folder/node_modules/next/dist/build/jest/__mocks__/fileMock.js',
    '^@/components/(.*)$': '<rootDir>/components/$1',
    '^@/pages/(.*)$': '<rootDir>/pages/$1'
  },
  testEnvironment: 'jest-environment-jsdom',
  testPathIgnorePatterns: [ '/node_modules/', '/.next/' ],
  transform: {
    '^.+\\.(js|jsx|ts|tsx|mjs)$': [
      '/my_folder/node_modules/next/dist/build/swc/jest-transformer.js',
      [Object]
    ]
  },
  transformIgnorePatterns: [ '/node_modules/', '^.+\\.module\\.(css|sass|scss)$' ],
  watchPathIgnorePatterns: [ '/.next/' ]
}
{
  setupFilesAfterEnv: [ '<rootDir>/jest.setup.js' ],
  moduleNameMapper: {
    '^.+\\.module\\.(css|sass|scss)$': '/my_folder/node_modules/next/dist/build/jest/object-proxy.js',
    '^.+\\.(css|sass|scss)$': '/my_folder/node_modules/next/dist/build/jest/__mocks__/styleMock.js',
    '^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$': '/my_folder/node_modules/next/dist/build/jest/__mocks__/fileMock.js',
    '^@/components/(.*)$': '<rootDir>/components/$1',
    '^@/pages/(.*)$': '<rootDir>/pages/$1'
  },
  testEnvironment: 'jest-environment-jsdom',
  testPathIgnorePatterns: [ '/node_modules/', '/.next/' ],
  transform: {
    '^.+\\.(js|jsx|ts|tsx|mjs)$': [
      '/my_folder/node_modules/next/dist/build/swc/jest-transformer.js',
      [Object]
    ]
  },
  transformIgnorePatterns: [ '/node_modules/', '^.+\\.module\\.(css|sass|scss)$' ],
  watchPathIgnorePatterns: [ '/.next/' ]
}

[nvh95]

Also, we are removing package-lock.json from examples #61. It's great if you can remove it from nextjs's example also. Rebase is a preferred option. Thanks

[netlify]

✅ Deploy Preview for jest-preview-library canceled.

Name	Link
🔨 Latest commit	84f05ed
🔍 Latest deploy log	https://app.netlify.com/sites/jest-preview-library/deploys/626209b7ffec72000a9bc501

[nvh95]

@thanhsonng Thank you for your work. I think the PR is almost ready to merge. I leave some comments, most of them related to documentation. Please take a look.
We also have a documentation site at www.jest-preview.com. The source code is in the folder website.
Would you mind to update a reference to example folder as well?

• https://github.com/nvh95/jest-preview/blob/4a78ab19113fe652f566649750f37e8ec738782e/website/docs/examples/next-rust.md
• https://github.com/nvh95/jest-preview/blob/4a78ab19113fe652f566649750f37e8ec738782e/website/docs/examples/next-babel.md

[thanhsonng]

@nvh95 I will open a new PR for that. This PR should be closed ASAP 😝

[nvh95]

Thank you. I think I need a little bit of time to think about the name configureNextJest.
Actually, at first I think it's fine to not place preview in the API name. But when reading

module.exports = configureNextJest(createJestConfig(customJestConfig));

makes me confused. So I'm thinking of configureNextJestPreview. What do you think @thanhsonng?

[thanhsonng]

I actually think the word next is unnecessary since this function is not specific to Next, but the word preview should be included so this function is not mistakenly identified with just Jest.

[nvh95]

@thanhsonng

I actually think the word next is unnecessary since this function is not specific to Next

I see your point. However, the current implementation of configureNextJest have both "general" part (CSS and file transforms) and "Next.JS-specific" parts (remove mock CSS, scss, files..., other framework, projects might have a slightly different config but achieve the same goals). I think for now we can just think it is the adapter we make for the special use case (Next.JS). In the long run, we can add more general adapters/ presets to ease the path of integrating Jest Preview to their projects.

Naming is hard, since it's one of two hard things in CS. We already have jestPreviewConfigure.
I suggest the name configureNextJestPreview. A little bit long. But I think it's clear and easy to understand.

but the word preview should be included so this function is not mistakenly identified with just Jest.

Absolutely agree.

[nvh95]

Let's ship it in 0.1.6-alpha.0

[nvh95]

@all-contributors please add @thanhsonng for code and example.

[allcontributors]

@nvh95

I've put up a pull request to add @thanhsonng! 🎉

[nvh95]

Welcome to contributors 🎉!