根据测试，我非常新鲜。前段时间我为纯 TS React 项目配置了一些测试。现在，我想对混合 JS 和 TS 内容的 React 项目做同样的事情。仅供参考，它正在被重写为 TS，但这需要一些时间。 以下是我的 jest.config.ts 文件内容。
import type { Config } from '@jest/types';
const config: Config.InitialOptions = {
roots: ['<rootDir>/test', '<rootDir>/src'],
transform: {
'^.+\\.tsx?$': 'ts-jest',
'^.+\\.css$': '<rootDir>/jest-config/style-mock.js',
},
setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
testEnvironment: 'jsdom',
collectCoverage: false,
collectCoverageFrom: ['src/**/*.{ts,tsx}'],
moduleNameMapper: {
'^.+\\.(css|sass|scss)$': 'identity-obj-proxy',
},
};
export default config;
当触发第一个测试时，我发现它在 .js 文件上中断。准确地说，错误文本是“
”语法错误：意外的标记“导出”
' 并且它指向某些文件导入声明。当我临时将此文件内容重写为 TS 时，它用任何等伪造它，它接受了该文件，但在下一个 js 上中断了。我应该如何修改配置才能与这种混合物很好地配合？
下面也是 tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"noFallthroughCasesInSwitch": true
},
"include": [
"src"
]
}
和package.json
{
"name": "google_books_finder",
"homepage": "http://kiszuriwalilibori.github.io/books",
"version": "1.4.2",
"private": true,
"dependencies": {
"@babel/plugin-proposal-private-methods": "^7.10.4",
"@babel/runtime-corejs3": "^7.11.2",
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.56",
"@reduxjs/toolkit": "^1.7.1",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.0.4",
"@testing-library/user-event": "^12.1.7",
"@types/jest": "^27.0.2",
"@types/node": "^16.11.6",
"@types/react": "^17.0.33",
"@types/react-dom": "^17.0.10",
"axios": "^0.23.0",
"comlink": "^4.3.0",
"dotenv": "^8.2.0",
"es6-promise": "^4.2.8",
"es6-symbol": "^3.1.3",
"eslint-plugin-jest-dom": "^4.0.1",
"eslint-plugin-testing-library": "^5.0.3",
"formik": "^2.2.9",
"identity-obj-proxy": "^3.0.0",
"jest": "^27.4.7",
"lodash": "^4.17.21",
"material-ui": "^0.20.2",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-app-polyfill": "^1.0.6",
"react-dom": "^17.0.2",
"react-hook-form": "^7.19.5",
"react-query": "^3.27.0",
"react-redux": "^7.2.1",
"react-router-dom": "^5.2.0",
"react-router-redux": "^4.0.8",
"react-scripts": "^5.0.0",
"redux": "^4.1.1",
"redux-saga": "^1.1.3",
"redux-thunk": "^2.3.0",
"throttle-debounce": "^2.3.0",
"ts-jest": "^27.1.3",
"ts-node": "^10.4.0",
"typescript": "^4.4.4",
"use-debounce": "^5.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"test:watch": "jest --watchAll",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"devDependencies": {
"@babel/preset-stage-3": "^7.8.3",
"@types/lodash": "^4.14.176",
"@types/react-router-dom": "^5.3.2",
"babel-plugin-styled-components": "^1.11.1",
"gh-pages": "^3.2.3"
},
"eslintConfig": {
"extends": "react-app"
},
"plugins": [
"babel-plugin-styled-components",
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
]
],
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all",
"ie >= 11"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"ie >= 11"
]
}
}
import type { Config } from '@jest/types';
const config: Config.InitialOptions = {
roots: ['<rootDir>/test', '<rootDir>/src'],
transform: {
'^.+\\.tsx?$': 'ts-jest',
'^.+\\.css$': '<rootDir>/jest-config/style-mock.js',
},
setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
testEnvironment: 'jsdom',
collectCoverage: false,
collectCoverageFrom: ['src/**/*.{ts,tsx}'],
moduleNameMapper: {
'^.+\\.(css|sass|scss)$': 'identity-obj-proxy',
},
preset:"ts-jest/presets/js-with-ts"
};
export default config;
您尝试过使用下面这个预设选项吗？更多详情可以在下面的网站找到。
preset:"ts-jest/presets/js-with-ts"