«Navbar ссылается на значение, но используется здесь как тип» при попытке визуализации мелкой копии моего компонента при тестировании

Question

Я пытаюсь написать тест для моего компонента React, используя TypeScript, Jest в качестве моего бегуна и Enzyme для тестирования моих компонентов React. Всякий раз, когда я передаю свой компонент в функцию shallow Enzyme, я получаю ошибку ts "Navbar" относится к значению, но используется здесь как тип. ", А ниже я получаю ошибку eslint" Ошибка синтаксического анализа: '>«ожидается».

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

Вот код для Navbar.tsx:

import React from 'react';
import { shallow } from 'enzyme';
import Navbar from './Navbar';

describe('Navbar component', () => {
    let component;
    beforeEach(() => {
        component = shallow(<Navbar />); // Error being desplayed here
    });

    it('should render without errors', () => {
        expect(component).toMatchInlineSnapshot();
        expect(component.length).toBe(1);
        expect(component).toBeTruthy();
    });
});

Также публикует мои файлы конфигурации:

tsconfig:

{
  "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"
  },
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts", "**/*.test.ts"]
}

jest.config.ts:

module.exports = {
    roots: ['<rootDir>/src'],
    transform: {
        '^.+\\.tsx?$': 'ts-jest',
    },
    testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
    snapshotSerializers: ['enzyme-to-json/serializer'],
    setupTestFrameworkScriptFile: '<rootDir>/src/setupEnzyme.ts',
};

Настройка фермента:

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import 'jest-enzyme';

configure({ adapter: new Adapter(), disableLifecycleMethods: 

Answer 1

Вы пытались изменить имя файла? MyComponent.test.tsx Кроме того, вы установили типы jest и прочее, кроме i -D @ types / jest. Я имею в виду, что говорю это, потому что если вы посмотрите на конфигурацию jest, где написано testRegex. Вы что-то вроде этого tests / *. (Test | spec) .txs тест должен находиться внутри папки tests и иметь имя: MyComponent.test.tsx