“导航栏指的是一个值，但在此处用作类型”在测试时尝试呈现我的组件的浅表副本

Posted 2023-03-13

【中文标题】“导航栏指的是一个值，但在此处用作类型”在测试时尝试呈现我的组件的浅表副本

【英文标题】："Navbar refers to a value, but is being used as a type here" when trying to render a shallow copy of my component when testing

【发布时间】：2020-02-08 23:58:07

【问题描述】：

我正在尝试为我的 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: 

【问题讨论】：

在 tsconfig.json 中排除“test”目录是不是一个好主意？

只是想知道，你真的需要beforeEach()吗？为什么不将作业移至顶层：const component = shallow(<Navbar />); // Error being desplayed here

【参考方案1】：

您是否尝试过更改文件名？ MyComponent.test.tsx 另外，您是否安装了 jest 和东西的类型 npm i -D @types/jest。 我的意思是我这样说是因为如果你看一下它说 testRegex 的笑话配置。你有这样的 __tests__/*.(test|spec).txs 测试必须在 tests 文件夹中，并且必须具有名称：MyComponent.test.tsx

【讨论】：

哇，我觉得自己好笨……把名字改成 .tsx 就解决了这个问题。非常感谢！

是的，我也是……我不仅错过了.tsx 中的x，还错过了.text -

是的，我的应用程序使用 .ts，所以我已更改为 .tsx。有效。非常感谢

【参考方案2】：

首先npm install -D @types/jest & 并将测试文件写为 fileName.test.tsx 我的错误是我将所有测试文件都写为fileName.test.ts

【讨论】：

这是我的问题。谢谢！

没错！感谢您提供这个显而易见的解决方案 - 很容易被忽视。