[英]“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
I am trying to write a test to my React component, using TypeScript, Jest as my test runner and Enzyme for testing my React components.我正在尝试为我的 React 组件编写一个测试,使用 TypeScript、Jest 作为我的测试运行器和 Enzyme 来测试我的 React 组件。 Whenever I pass my component into the
shallow
Enzyme function, I get the ts error "'Navbar' refers to a value, but is being used as a type here.", and underneath I get eslint error "Parsing error: '>' expected".每当我将组件传递到
shallow
酶 function 时,我都会收到 ts 错误“'Navbar' 指的是一个值,但在这里被用作一个类型。”,在下面我得到 eslint 错误“解析错误:'>' 预期”。
I tried it on some other components, all have the same error when being passed into the shallow
function as arguments.我在其他一些组件上进行了尝试,当作为 arguments 传递到
shallow
function 时,它们都有相同的错误。 I suspect it may have something to do with my TS configurations, but for the life of me I cannot seem to be finding a solution.我怀疑这可能与我的 TS 配置有关,但对于我来说,我似乎无法找到解决方案。
Here's the code for Navbar.tsx:这是 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();
});
});
Also posting my config files:还发布我的配置文件:
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: 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',
};
Enzyme setup:酶设置:
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import 'jest-enzyme';
configure({ adapter: new Adapter(), disableLifecycleMethods:
Have you tried to change the name of the file?您是否尝试过更改文件的名称? MyComponent.test.tsx Also, did you install the types of jest and stuff
npm i -D @types/jest
. MyComponent.test.tsx 另外,您是否安装了 jest 的类型和东西
npm i -D @types/jest
。 I mean I'm saying this because if you look at the jest config where it says testRegex.我的意思是我这么说是因为如果你看一下它说 testRegex 的开玩笑配置。 You have it like this
__tests__/*.(test|spec).txs
the test must be inside a tests folder and it has to have the name: MyComponent.你有这样的
__tests__/*.(test|spec).txs
测试必须在测试文件夹中,并且它必须具有名称:MyComponent。 test
.tsx test
.tsx
First npm install -D @types/jest
& and write the test files as fileName.test.tsx
My mistake was I was writing all the test files as fileName.test.ts
首先
npm install -D @types/jest
& 并将测试文件写入fileName.test.tsx
我的错误是我将所有测试文件都写入fileName.test.ts
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.