Неожиданный токен для скриптов TSX - PullRequest
Новая
       11

Неожиданный токен для скриптов TSX

0 голосов
/ 18 апреля 2019

Я пытаюсь протестировать файлы компонентов TSX с помощью jest из теста JSX и получаю вывод, который указывает мне, что сам код не может быть передан.

Если я переименую свой тест в * .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-реагировать на приложение, и я предпочитаю не извлекать, но я не привязан к нему, если это необходимо.

Я перепробовал несколько конфигураций и расширений, но не совсем попал в поле зрения полностью выполненного теста. Используя встроенный в Webstorm jest runner, я выполнил тест и сохранил снимок с ожидаемым выводом, поэтому я уверен, что сам код прошел.

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));

приведет к выполнению теста , но пакет не будет реализован в реализации компонента, очевидно, кодовая база достаточно велика, и я не собираюсь заменять весь JSX!

...