Question

我正在尝试在JSX测试中使用开玩笑来测试TSX组件文件，并获得一个输出，向我表明代码本身无法进行编译。

如果我将测试重命名为* .test.jsx，则测试将执行，但组件脚本将无法解析；


    SyntaxError: .../child/accessdoor.tsx: Unexpected token (50:16)

      48 |         const { displayFloor } = this.props;
      49 |         const upstairsDoorsTip = "Do you have any balcony doors or other access doors upstairs?";
    > 50 |         return (<>
         |                 ^

如果将测试重命名为* .test.tsx，则测试本身将无法解析；

                const component = enzyme_1.shallow(<yourhome_1.EntranceExitDoorChoice {...emptyProps}/>);
                                                   ^

    SyntaxError: Unexpected token <

请注意，我使用的是自举的create-react-app应用程序，如果没有必要，我会首选不弹出，但我不赞成这样做。

我尝试了多种配置和扩展，但没有完全实现测试的最佳效果。使用Webstorm的内置笑话运行器，我执行了测试，并存储了带有期望输出的快照，因此我确信代码本身会通过。

babel.config.js

module.exports = function (api) {
  api.cache(true);

  const presets = [
    "react-app",
      "@babel/env",
    "@babel/react",
    "@babel/typescript"
  ];

  const plugins =  [
    "@babel/proposal-class-properties",
    "@babel/proposal-object-rest-spread"
  ];

  return {
    presets,
    plugins
  };
};

jest.config.js

// For a detailed explanation regarding each configuration property, visit:
// https://jestjs.io/docs/en/configuration.html

module.exports = {
    // Automatically clear mock calls and instances between every test
    // clearMocks: true,

    // Indicates whether the coverage information should be collected while executing the test
    collectCoverage: true,

    // The directory where Jest should output its coverage files
    coverageDirectory: "coverage",
    testEnvironment: "jsdom",

    preset: 'ts-jest',

    testPathIgnorePatterns: [
        "/node_modules/",
        "__tests__/setup/"
    ],

    moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
    transform: {
        '^.+\\.(jsx|js)$': 'babel-jest',
        "^.+\\.(tsx|ts)$": "ts-jest"
    },
    setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],

    moduleNameMapper: {
        '^@/(.*)$': '<rootDir>/src/$1',
    },

    testMatch: [
        '<rootDir>/src/__tests__/**/*.js?(x)',
        '<rootDir>/src/__tests__/**/*.ts?(x)'
    ],

    globals: {
        'ts-jest': {
            babel: true,
            tsConfig: "tsconfig.json"
        }
    }
};

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "strictNullChecks": false,
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "jsx": "preserve",
    "lib": [
      "dom",
      "es2017"
    ],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "removeComments": false,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "target": "esnext",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "include": [
    "./src/"
  ]
}

编辑：

更改

const component = shallow(<AccessDoorChoice {...emptyProps}/>);

到

const component = shallow(React.createElement(AccessDoorChoice, emptyProps));

将导致执行 test ，但是该套件将在组件实现中失败，显然代码库很大，而且我不打算替换所有JSX！

TSX脚本的意外令牌

0 个答案: