0

在 Next JS 应用程序中使用 jest-dom 和 react-testing 库设置 ts-jest 时遇到问题，我似乎无法访问任何 @testing-library/jest-dom 匹配器。

任何人都对这种带有 typescript 和 jest-dom 的设置有任何见解吗？到目前为止，我已经尝试了一些不同的解决方案，包括遵循 testing-library/jest-dom 文档和其他各种线程，但没有成功。

以下是相关的依赖项和设置文件...

// package.json

"dependencies": {
  "@types/testing-library__jest-dom": "^5.14.2",
  ..."
},
"devDependencies": {
  "@testing-library/jest-dom": "^5.16.0",
  "@testing-library/react": "^12.1.2",
  "@types/jest": "^27.0.3",
  "@types/react": "17.0.33",
  "ts-jest": "^27.0.7",
  "typescript": "^4.5.2",
   ..."
}

// jest.config.json
/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
  preset: 'ts-jest/presets/js-with-ts-esm', // or other ESM presets
  testEnvironment: 'jsdom',
  moduleDirectories: ["node_modules", "src"],
  verbose: true,
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
    globals: {
    // we must specify a custom tsconfig for tests because we need the typescript transform
    // to transform jsx into js rather than leaving it jsx such as the next build requires.  you
    // can see this setting in tsconfig.jest.json -> "jsx": "react"
    "ts-jest": {
      tsconfig: "tsconfig.jest.json"
    }
  },
  moduleNameMapper: {
    '\\.(css|scss|png|img)$': 'identity-obj-proxy',
    '\\.svg$': '<rootDir>/__mocks__/svg.js',
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': "<rootDir>/svgTransform.js"
  },
  "transform": {
    "^.+\\.tsx?$": "ts-jest",
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': "<rootDir>/svgTransform.js"
 },
 setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
};

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "DOM",
      "DOM.Iterable",
      "ES2015",
      "ES2016.Array.Include",
      "ES2017.Object",
      "ES2017.String",
      "ES2018.AsyncIterable",
      "ES2018.Promise",
      "ES2019.Array",
      "ES2019.Object",
      "ES2019.String",
      "ES2019.Symbol",
      "ES2020.Promise",
      "ES2020.String",
      "ES2020.Symbol.WellKnown",
      "ESNEXT"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": false,
    "jsx": "preserve",
    "baseUrl": ".",
    "paths": {
      "*": [
        "src/*"
      ]
    },
    "incremental": true
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "setupTests.ts",
    "src",
    "src/@deprecated/pages/Property/components/PropertyInfo/components/Invest/components/Calculator/Calculator.spec.jsx", "src/@deprecated/pages/Property/components/PropertyInfo/components/Invest/components/Calculator/Calculator.spec.jsx", "jest.config.js"  ],
  "exclude": [
    "node_modules"
  ],
  "types": ["node", "jest", "@types/testing-library__jest-dom"]
}


// setupTests.ts
import '@testing-library/jest-dom/extend-expect'


// tsconfig.jest.json
{
    "extends": "./tsconfig.json",
    "compilerOptions": {
      "jsx": "react-jsx"
    }
  }

最后是无法识别 .toBeInTheDocument() 匹配器方法的规范文件。

// Calculator.spec.tsx
import React from 'react'
import { expect, test } from '@jest/globals'
import { render, screen, cleanup } from '@testing-library/react'
import { Calculator } from './Calculator'


afterEach(cleanup);

describe('<Calculator />', () => {
    test('Slider is rendered', () => {
      render(<Calculator rentalDividends={12} returnOnInvestment={5} fundingTarget={363500} brickPrice={1000}/>)
      const slider = screen.getByTestId("slider")
      expect(slider).toBeInTheDocument()
})
4

0 回答 0