“導航欄指的是一個值，但在這里被用作一種類型”在測試時嘗試渲染我的組件的淺表副本

Question

我正在嘗試為我的 React 組件編寫一個測試，使用 TypeScript、Jest 作為我的測試運行器和 Enzyme 來測試我的 React 組件。 每當我將組件傳遞到shallow酶 function 時，我都會收到 ts 錯誤“'Navbar' 指的是一個值，但在這里被用作一個類型。”，在下面我得到 eslint 錯誤“解析錯誤：'>' 預期”。

我在其他一些組件上進行了嘗試，當作為 arguments 傳遞到shallow function 時，它們都有相同的錯誤。 我懷疑這可能與我的 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();
    });
});

還發布我的配置文件：

配置：

{
  "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 的類型和東西npm i -D @types/jest 。 我的意思是我這么說是因為如果你看一下它說 testRegex 的開玩笑配置。 你有這樣的__tests__/*.(test|spec).txs測試必須在測試文件夾中，並且它必須具有名稱：MyComponent。 test .tsx

Answer 2

首先npm install -D @types/jest & 並將測試文件寫入fileName.test.tsx我的錯誤是我將所有測試文件都寫入fileName.test.ts