testing-library/react 的渲染方法与我的打字稿组件不匹配

Question

我正在尝试使用 jest/testing 库在我的 nextJS 应用程序中进行测试，当我将组件放入 render 方法时，它会抱怨，这是我第一次使用 jest/react 测试接下来，我按照文档进行操作，但它仍然不起作用：

错误：

SyntaxError: C:\Users\gabri\OneDrive\Documentos\nextJS\no_role\src\tests\index.spec.ts: Unexpected token, expected "," (7:21)     

       5 |
       6 |     it ('Should open home', () => {
    >  7 |         render(<MyApp/>)
         |                      ^
       8 |     })
       9 | });
      10 |

      at Object._raise (node_modules/@babel/parser/src/parser/error.js:147:45)
      at Object.raiseWithData (node_modules/@babel/parser/src/parser/error.js:142:17)
      at Object.raise (node_modules/@babel/parser/src/parser/error.js:91:17)
      at Object.unexpected (node_modules/@babel/parser/src/parser/util.js:175:16)
      at Object.expect (node_modules/@babel/parser/src/parser/util.js:135:28)
      at Object.tsParseDelimitedListWorker (node_modules/@babel/parser/src/plugins/typescript/index.js:421:16)
      at Object.tsParseDelimitedList (node_modules/@babel/parser/src/plugins/typescript/index.js:376:14)
      at Object.tsParseBracketedList (node_modules/@babel/parser/src/plugins/typescript/index.js:448:27)
      at Object.tsParseTypeParameters (node_modules/@babel/parser/src/plugins/typescript/index.js:555:26)
      at node_modules/@babel/parser/src/plugins/typescript/index.js:2902:31

index.spect.ts:

import {render, screen} from '@testing-library/react';
import MyApp from '../pages/_app'

describe('New Test', () => {

    it ('Should open home', () => {
        render(<MyApp/>)
    })
});

export {};

jest.config.js:

module.exports = {
    testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
    setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
    moduleNameMapper: {
      '^@/components/(.*)$': '<rootDir>/components/',
    },
    transform: {
      '^.+\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
    },
    collectCoverageFrom: ['components/**/*.ts', 'pages/**/*.ts'],
    coverageReporters: ['lcov', 'text'],
  };

babel.config.js:

module.exports = {
  presets: [
    '@babel/preset-typescript',
    'next/babel'
  ]
}

setupTest.js:

import '@testing-library/jest-dom';

package.json:

{
  "name": "no_role",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "jest --watch"
  },
  "dependencies": {
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@material-ui/icons": "^4.11.2",
    "@mui/icons-material": "^5.2.5",
    "@mui/material": "^5.2.5",
    "next": "12.0.7",
    "primeicons": "^5.0.0",
    "primereact": "^7.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-lottie": "^1.2.3",
    "react-transition-group": "^4.4.2"
  },
  "devDependencies": {
    "@babel/preset-typescript": "^7.16.7",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@types/jest": "^27.4.0",
    "@types/react": "^17.0.38",
    "@types/react-lottie": "^1.2.6",
    "eslint": "8.5.0",
    "eslint-config-next": "12.0.7",
    "jest": "^27.4.7",
    "typescript": "^4.5.4"
  }
}

Answer 1

将您的文件重命名为 index.spec.tsx

Answer 2

如果有人也遇到这个问题，这对我有用：

// jest.config.js
 modulePaths: [
    "<rootDir>"
  ],

testing-library/react 的渲染方法与我的打字稿组件不匹配

method render from testing-library/react dont match with my component with typescript

typescript

jestjs

react-testing-library