使用NextJS和Jest时package.json出错

enyaitl3  于 2023-04-03  发布在  Jest
关注(0)|答案(1)|浏览(140)

我偶然发现的问题,如“无法解决主package.json文件”使用NextJS与Jest.我已经尝试使用jest.config.js与Babel和它的工作,但'下一个/jest'变种不工作.感谢您的帮助:)
:::::jest.config.js:::::

const nextJest = require('next/jest')
const { pathsToModuleNameMapper } = require('ts-jest')
const { compilerOptions } = require('./tsconfig.json')

const createJestConfig = nextJest({
  dir: '/'
})

const customJestConfig = {
  moduleDirectories: ["node_modules", "<rootDir>/", "<rootDir>/src"],
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths),
  testEnvironment: "jest-environment-jsdom"
}

module.exports = createJestConfig(customJestConfig)

:::::package.json::::

{
  // omitted unnecessary
  "scripts": {
    "test": "jest --watch",
  },
  "dependencies": {
    "next": "^13.1.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "4.9.4"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@types/jest": "^29.2.6",
    "@types/react-redux": "^7.1.25",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^29.3.1",
    "jest-environment-jsdom": "^29.4.2",
    "ts-jest": "^29.0.5"
  }
}

:::::tsconfig.json::::

{
  "compilerOptions": {
    "target": "esNext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@@/*": ["./*"],
      "@fb/*": ["./firebase/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "src/components/Header/__tests__/header.test.tsx", "jest.config.js"],
  "exclude": ["node_modules"]
}

错误信息:error log
它使用以下jest.config.js配置

module.exports = {
  collectCoverage: true,
  coverageProvider: 'v8',
  collectCoverageFrom: [
    '**/*.{js,jsx,ts,tsx}',
    '!**/*.d.ts',
    '!**/node_modules/**',
    '!<rootDir>/out/**',
    '!<rootDir>/.next/**',
    '!<rootDir>/*.config.js',
    '!<rootDir>/coverage/**',
  ],
  moduleNameMapper: {
    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
    '^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',
    '^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i': `<rootDir>/__mocks__/fileMock.js`,

    '^@/(.*)$': '<rootDir>/src/$1',
    '^@/components/(.*)$': '<rootDir>/components/$1',
  },
  testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
  },
  transformIgnorePatterns: [
    '/node_modules/',
    '^.+\\.module\\.(css|sass|scss)$',
  ],
}
vc6uscn9

vc6uscn91#

我认为问题在于调用nextJest:dir被设置为/,因此它在文件系统的根目录中查找package.json。
在jest.config.js中,将dir: '/'更改为dir: './'

相关问题