проблема jest с компонентами реакции машинописного текста - PullRequest
Новая
       137

проблема jest с компонентами реакции машинописного текста

0 голосов
/ 06 августа 2020

В настоящее время у меня проблема с Jest и Typescript внутри монофонического репозитория Lerna.

Внутри тестового файла я импортировал компонент import { Doctor } from '../src';, и этап тестирования выглядит следующим образом: 

it('should be selectable by class "btn-doctor"', function() {
    expect(shallow(<Doctor/>).is('.btn-doctor')).toBe(true);
  });

<Doctor /> подчеркнуто как предупреждение; говоря: 'Doctor' refers to a value, but is being used as a type here. Did you mean 'typeof Doctor'?ts(2749)

Я думаю, что проблема связана с конфигурацией, но я не нашел ничего в официальных документах для Typescript и Jest.

Проблема может быть воспроизведена в этом репо https://github.com/umarmw/lopital-sdk при работе lerna run test

lerna ERR! npm run test stderr:
FAIL __tests__/doctor.test.ts
  ● Test suite failed to run

    __tests__/doctor.test.ts:14:21 - error TS2749: 'Doctor' refers to a value, but is being used as a type here. Did you mean 'typeof Doctor'?

    14     expect(shallow(<Doctor/>).is('.btn-doctor')).toBe(true);
                           ~~~~~~
    __tests__/doctor.test.ts:18:19 - error TS2749: 'Doctor' refers to a value, but is being used as a type here. Did you mean 'typeof Doctor'?

    18     expect(mount(<Doctor title="MO" />).find('.btn-doctor').length).toBe(1);
                         ~~~~~~
    __tests__/doctor.test.ts:18:26 - error TS2304: Cannot find name 'title'.

    18     expect(mount(<Doctor title="MO" />).find('.btn-doctor').length).toBe(1);

Текущие файлы конфигурации выглядят следующим образом:

tsconfig.json

{
  "compilerOptions": {
    "target": "es6", // Specify ECMAScript target version
    "sourceMap": true, //   Generates corresponding .map file.
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ], // List of library files to be included in the compilation.
    "allowJs": false, // Allow JavaScript files to be compiled.
    "skipLibCheck": true, // Skip type checking of all declaration files (*.d.ts).
    "esModuleInterop": true, // Emit __importStar and __importDefault helpers for runtime babel ecosystem compatibility and enable --allowSyntheticDefaultImports for typesystem compatibility.
    "allowSyntheticDefaultImports": true, // Allow default imports from modules with no default export. This does not affect code emit, just typechecking.
    "strict": true, // Enable all strict type checking options.
    "forceConsistentCasingInFileNames": true, // Disallow inconsistently-cased references to the same file.
    "noImplicitAny": false, //  Raise error on expressions and declarations with an implied any type.
    "noLib": false, // Do not include the default library file (lib.d.ts).
    "emitDecoratorMetadata": true, // Emit design-type metadata for decorated declarations in source.
    "experimentalDecorators": true, // Enables experimental support for ES decorators.
    "module": "commonjs", // Specify module code generation: "None", "CommonJS", "AMD", "System", "UMD", "ES6", "ES2015" or "ESNext".
    // "moduleResolution": "node",
    // "resolveJsonModule": true,
    "jsx": "react", // Support JSX in .tsx files: "react", "preserve", "react-native". See JSX.
    "declaration": true, //     Generates corresponding .d.ts file.
  },
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

jest.config.js

module.exports = {
  preset: "ts-jest",
  testEnvironment: "node",
  globals: {
    "ts-jest": {
      extends: './babel.config.js',
      tsConfig: {
        // allow js in typescript
        allowJs: true,
      },
    },
  },
  verbose: true,
  moduleFileExtensions: ['ts', 'tsx', 'js'],
  notify: true,
  notifyMode: 'always',
  testMatch: ['**/__tests__/*.+(ts|tsx|js)', '**/*.test.+(ts|tsx|js)'],
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest',
  },
  // testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
  testPathIgnorePatterns: [
    '/node_modules/',
    '(/__tests__/.*|(\\.|/)(test|spec))\\.d\.ts$'
  ],
  snapshotSerializers: ['enzyme-to-json/serializer'],
  // setupFilesAfterEnv: ['<rootDir>../setupTests.js'],
}

babel.config.js

module.exports = {
    presets: [
      '@babel/preset-react',
      '@babel/preset-typescript',
      [
        '@babel/preset-env',
        {
          targets: {node: 'current'}
        }
      ],
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ]
    ]
  }

Есть идеи?

1 Ответ

0 голосов
/ 06 августа 2020

Ошибка означает, что синтаксис JSX не распознается компилятором TypeScript и анализируется как обобщенный c.

Поскольку tsconfig. json имеет "jsx": "react", это означает, что это не так. подобрал ts-jest по какой-то причине. Причина в том, что он был отменен опцией tsConfig. Обычный способ предоставить конфигурацию для тестов - расширить другую конфигурацию

tsconfig.test. json

{
  "extends": "./tsconfig",
  "compilerOptions": {
    "allowJs": true
  }
}

и указать ее для ts-jest: 

"tsConfig": "tsconfig.test.json"

Кроме того, ts-jest не имеет опции extends, и даже если бы она была, она бы не приняла конфигурацию Babel. Для этого есть babelConfig опция . Поскольку ts-jest преобразует TypeScript и JSX, @babel/preset-react и @babel/preset-typescript могут быть ненужными в конфигурации Babel.

...