Update with-jest example (#27894)

## Documentation / Examples

- [x] Make sure the linting passes

This PR updates our current with-jest example to match the examples in upcoming docs, add module alias configuration and be more consistent with Jest conventions.

Author: delbaoliveira

examples/with-jest/.babelrc

@@ -0,0 +1 @@
+module.exports = 'test-file-stub'

examples/with-jest/__mocks__/fileMock.js

@@ -0,0 +1,4 @@
+// Mock CSS files.
+// If you're using CSS modules, this file can be deleted.
+
+module.exports = {}

examples/with-jest/__mocks__/styleMock.js

@@ -8,7 +8,7 @@ exports[`renders homepage unchanged 1`] = `
     <h1
       className="title"
     >
-      Welcome to
+      Welcome to 
       <a
         href="https://nextjs.org"
       >
@@ -18,7 +18,7 @@ exports[`renders homepage unchanged 1`] = `
     <p
       className="description"
     >
-      Get started by editing
+      Get started by editing 
       <code>
         pages/index.js
       </code>

examples/with-jest/__tests__/__snapshots__/snapshot.js.snap

@@ -2,10 +2,14 @@ import React from 'react'
 import { render } from '@testing-library/react'
 import Index from '../pages/index'
 
-test('renders deploy link', () => {
-  const { getByText } = render(<Index />)
-  const linkElement = getByText(
-    /Instantly deploy your Next\.js site to a public URL with Vercel\./
-  )
-  expect(linkElement).toBeInTheDocument()
+describe('App', () => {
+  it('renders a heading', () => {
+    const { getByRole } = render(<Index />)
+
+    const heading = getByRole('heading', {
+      name: /welcome to next\.js!/i,
+    })
+
+    expect(heading).toBeInTheDocument()
+  })
 })

examples/with-jest/__tests__/testing-library.js

@@ -4,17 +4,30 @@ module.exports = {
     '!**/*.d.ts',
     '!**/node_modules/**',
   ],
-  setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
-  testPathIgnorePatterns: ['/node_modules/', '/.next/'],
+  moduleNameMapper: {
+    // Handle CSS imports (with CSS modules)
+    // https://jestjs.io/docs/webpack#mocking-css-modules
+    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
+
+    // Handle CSS imports (without CSS modules)
+    '^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',
+
+    // Handle image imports
+    // https://jestjs.io/docs/webpack#handling-static-assets
+    '^.+\\.(jpg|jpeg|png|gif|webp|svg)$': `<rootDir>/__mocks__/fileMock.js`,
+
+    // Handle module aliases
+    '^@/components/(.*)$': '<rootDir>/components/$1',
+  },
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
   transform: {
-    '^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/node_modules/babel-jest',
-    '^.+\\.css$': '<rootDir>/config/jest/cssTransform.js',
+    // 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'] }],
   },
   transformIgnorePatterns: [
     '/node_modules/',
     '^.+\\.module\\.(css|sass|scss)$',
   ],
-  moduleNameMapper: {
-    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
-  },
 }

examples/with-jest/config/jest/cssTransform.js

@@ -0,0 +1,6 @@
+// Optional: configure or set up a testing framework before each test.
+// If you delete this file, remove `setupFilesAfterEnv` from `jest.config.js`
+
+// Used for __tests__/testing-library.js
+// Learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect'

examples/with-jest/jest.config.js

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/components/*": ["components/*"]
+    }
+  }
+}