การทดสอบหน่วยเชิงมุม 2: ไม่พบชื่อ 'อธิบาย'

ฉันกำลังติดตามการสอนนี้จาก angular.io

ดังที่พวกเขากล่าวว่าฉันได้สร้างไฟล์ hero.spec.ts เพื่อสร้างการทดสอบหน่วย:

import { Hero } from './hero';
describe('Hero', () => {
  it('has name', () => {
    let hero: Hero = {id: 1, name: 'Super Cat'};
    expect(hero.name).toEqual('Super Cat');
  });
  it('has id', () => {
    let hero: Hero = {id: 1, name: 'Super Cat'};
    expect(hero.id).toEqual(1);
  });
});

การทดสอบหน่วยทำงานเหมือนมีเสน่ห์ ปัญหาคือ: ฉันเห็นข้อผิดพลาดบางอย่างซึ่งกล่าวถึงในการกวดวิชา:

บรรณาธิการและผู้เรียบเรียงของเราอาจบ่นว่าพวกเขาไม่รู้อะไรit และexpectเป็นเพราะพวกเขาไม่มีไฟล์การพิมพ์ที่อธิบายจัสมิน เราสามารถเพิกเฉยต่อข้อร้องเรียนที่น่ารำคาญเหล่านี้ได้ในขณะนี้เนื่องจากไม่เป็นอันตราย

และพวกเขาก็เพิกเฉยต่อมันอย่างแน่นอน แม้ว่าข้อผิดพลาดเหล่านั้นจะไม่เป็นอันตราย แต่ก็ไม่ได้ดูดีในคอนโซลเอาท์พุทของฉันเมื่อฉันได้รับกลุ่ม

ตัวอย่างของสิ่งที่ฉันได้รับ:

ไม่พบชื่อ 'บรรยาย'

ไม่พบชื่อ 'มัน'

ไม่พบชื่อ 'คาดหวัง'

ฉันจะแก้ไขได้อย่างไร

ฉันหวังว่าคุณจะติดตั้ง -

npm install --save-dev @types/jasmine

จากนั้นนำเข้าดังต่อไปนี้ที่ด้านบนของhero.spec.tsไฟล์ -

import 'jasmine';

มันควรจะแก้ปัญหา

ด้วย Typescript@2.0 หรือใหม่กว่าคุณสามารถติดตั้งประเภทต่างๆด้วย:

npm install -D @types/jasmine

จากนั้นนำเข้าชนิดโดยอัตโนมัติโดยใช้typesตัวเลือกในtsconfig.json:

"types": ["jasmine"],

การแก้ปัญหานี้ไม่จำเป็นต้องมีimport {} from 'jasmine';ในแต่ละไฟล์ข้อมูลจำเพาะ

npm install @types/jasmine

ตามที่ระบุไว้ในความคิดเห็นบางอย่าง"types": ["jasmine"]ไม่จำเป็นอีกต่อไป@typesแพคเกจทั้งหมดจะรวมอยู่ในการรวบรวมโดยอัตโนมัติ (ตั้งแต่ v2.1 ฉันคิดว่า)

ในความคิดของฉันทางออกที่ง่ายที่สุดคือการแยกไฟล์ทดสอบในtsconfig.jsonของคุณเช่น:

"exclude": [
    "node_modules",
    "**/*.spec.ts"
]

มันใช้งานได้สำหรับฉัน

ข้อมูลเพิ่มเติมอย่างเป็นทางการในเอกสาร TSconfig

คุณต้องติดตั้งแบบอักษรสำหรับดอกมะลิ สมมติว่าคุณอยู่ใน typescript 2 รุ่นล่าสุดที่คุณควรทำ:

npm install --save-dev @types/jasmine

ด้วย Typescript@2.0 หรือใหม่กว่าคุณสามารถติดตั้งประเภทด้วยการติดตั้ง npm

npm install --save-dev @types/jasmine

จากนั้นอิมพอร์ตชนิดโดยอัตโนมัติโดยใช้อ็อพชัน typeRootsใน tsconfig.json

"typeRoots": [
      "node_modules/@types"
    ],

โซลูชันนี้ไม่ต้องการการนำเข้า {} จาก 'jasmine'; ในแต่ละไฟล์ข้อมูลจำเพาะ

การแก้ไขปัญหานี้เชื่อมโยงกับสิ่งที่@Pace เขียนไว้ในคำตอบของเขา อย่างไรก็ตามมันไม่ได้อธิบายทุกอย่างดังนั้นถ้าคุณไม่รังเกียจฉันจะเขียนเอง

สารละลาย:

เพิ่มบรรทัดนี้:

///<reference path="./../../../typings/globals/jasmine/index.d.ts"/>

ที่จุดเริ่มต้นของhero.spec.tsปัญหาการแก้ไขไฟล์ เส้นทางนำไปสู่typingsโฟลเดอร์ (ที่จัดเก็บการพิมพ์ทั้งหมด)

ในการติดตั้งการพิมพ์คุณจำเป็นต้องสร้างtypings.jsonไฟล์ในรูทของโปรเจคของคุณด้วยเนื้อหาดังต่อไปนี้:

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160807145350"
  }
}

และเรียกใช้typings install( typingsแพคเกจ NPM อยู่ที่ไหน)

ในกรณีของการแก้ปัญหาคือการลบในของฉันtypeRootstsconfig.json

ตามที่คุณสามารถอ่านได้ในTypeScript doc

หากระบุ typeRoots จะมีเฉพาะแพ็คเกจภายใต้ typeRoots เท่านั้น

ฉันเป็นรุ่นล่าสุดจนถึงทุกวันนี้และพบว่าวิธีที่ดีที่สุดในการแก้ไขปัญหานี้คือการไม่ทำอะไรเลย ... ไม่typeRootsไม่typesไม่excludeไม่มีincludeค่าเริ่มต้นทั้งหมดที่ดูเหมือนจะใช้ได้ดี ที่จริงแล้วมันไม่ได้ผลสำหรับฉันจนกว่าฉันจะลบพวกเขาทั้งหมด ฉันมี:

"exclude": [
    "node_modules"
]

แต่นั่นเป็นค่าเริ่มต้นดังนั้นฉันจึงลบมันออก

ฉันมี:

"types": [
    "node"
]

เพื่อผ่านการเตือนคอมไพเลอร์ แต่ตอนนี้ฉันก็ลบมันเช่นกัน

คำเตือนที่ไม่ควรเป็นคือ: error TS2304: Cannot find name 'AsyncIterable'. จากnode_modules\@types\graphql\subscription\subscribe.d.ts

ซึ่งน่ารังเกียจมากดังนั้นฉันทำเช่นนี้ใน tsconfig เพื่อที่จะโหลดมัน:

"compilerOptions": {
    "target": "esnext",
}

เนื่องจากมันอยู่ในชุด esnext ฉันไม่ได้ใช้งานโดยตรงดังนั้นจึงไม่ต้องกังวลเกี่ยวกับความเข้ากันได้ที่นี่ หวังว่าจะไม่เผาฉันในภายหลัง

ต้องทำสิ่งต่อไปนี้เพื่อรับ @types ในLerna Mono-repo ที่มี node_modules หลายตัวเท่านั้น

npm install -D @types/jasmine

จากนั้นในแต่ละ tsconfig.file ของแต่ละโมดูลหรือแอพ

"typeRoots": [
  "node_modules/@types",
  "../../node_modules/@types" <-- I added this line
],

เพื่อให้ TypeScript คอมไพเลอร์ใช้นิยามประเภทที่มองเห็นได้ทั้งหมดในระหว่างการรวบรวมtypesตัวเลือกควรถูกลบออกอย่างสมบูรณ์จากcompilerOptionsสนามในtsconfig.jsonไฟล์

ปัญหานี้เกิดขึ้นเมื่อมีtypesรายการบางรายการในcompilerOptionsฟิลด์ที่รายการในเวลาเดียวกันjestหายไป

ดังนั้นเพื่อแก้ไขปัญหาcompilerOptionsฟิลด์ในtscongfig.jsonควรรวมjestอยู่ในtypesพื้นที่หรือกำจัดtypescomnpletely:

{
  "compilerOptions": {
    "esModuleInterop": true,
    "target": "es6",
    "module": "commonjs",
    "outDir": "dist",
    "types": ["reflect-metadata", "jest"],  //<--  add jest or remove completely
    "moduleResolution": "node",
    "sourceMap": true
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

ฉันจะเพิ่มคำตอบสำหรับสิ่งที่ได้ผลสำหรับฉันใน "typescript": "3.2.4" ฉันรู้ว่าดอกมะลิใน node_modules / @ type มีโฟลเดอร์สำหรับ ts3.1 ภายใต้ประเภทดอกมะลิดังนั้นนี่คือขั้นตอน: -

• ติดตั้งจัสมินประเภท npm install -D @types/jasmine

• เพิ่มไปยัง tsconfig.json jasmine / ts3.1

  "typeRoots": [ ... "./node_modules/jasmine/ts3.1" ],

• เพิ่มจัสมินกับประเภท

  "types": [ "jasmine", "node" ],

หมายเหตุ:ไม่จำเป็นสำหรับสิ่งนี้import 'jasmine';อีกต่อไป

ในกรณีของฉันฉันได้รับข้อผิดพลาดนี้เมื่อฉันให้บริการแอพไม่ใช่เมื่อทำการทดสอบ ฉันไม่ทราบว่ามีการตั้งค่าที่แตกต่างกันในไฟล์ tsconfig.app.json ของฉัน

ฉันเคยมีสิ่งนี้:

{
  ...
  "include": [
    "src/**/*.ts"
  ]
}

มันรวม.spec.tsไฟล์ทั้งหมดของฉันเมื่อแสดงแอพ ฉันเปลี่ยนการinclude property toยกเว้นและเพิ่ม regex เพื่อแยกไฟล์ทดสอบทั้งหมดเช่นนี้:

{
  ...
  "exclude": [
    "**/*.spec.ts",
    "**/__mocks__"
  ]
}

ตอนนี้มันทำงานได้ตามที่คาดไว้

ดูการนำเข้าบางทีคุณอาจมีการพึ่งพาวงจรนี่คือในกรณีของฉันข้อผิดพลาดการใช้import {} from 'jasmine';จะแก้ไขข้อผิดพลาดในคอนโซลและทำให้รหัส compilable แต่ไม่เอารากของปีศาจ (ในกรณีของฉันขึ้นอยู่กับวงจร)

ฉันใช้ Angular 6, Typescript 2.7 และฉันใช้กรอบ Jest เพื่อทดสอบหน่วย ฉันได้@types/jestติดตั้งและเพิ่มไว้typeRootsภายในtsconfig.json

แต่ก็ยังมีข้อผิดพลาดการแสดงด้านล่าง (เช่น: บน terminal ไม่มีข้อผิดพลาด)

ไม่พบชื่ออธิบาย

และเพิ่มการนำเข้า:

import {} from 'jest'; // in my case or jasmine if you're using jasmine

ในทางเทคนิคไม่ได้ทำอะไรเลยฉันคิดว่ามีการนำเข้าที่ไหนสักแห่งที่ทำให้เกิดปัญหานี้แล้วฉันก็พบว่าถ้าลบไฟล์

tsconfig.spec.json

ใน src/โฟลเดอร์แก้ปัญหาให้ฉัน ในฐานะที่เป็น @types จะถูกนำเข้ามาก่อนภายใน rootTypes

ฉันแนะนำให้คุณทำเช่นเดียวกันและลบไฟล์นี้ไม่จำเป็นต้องมีการกำหนดค่าภายใน (ps: หากคุณอยู่ในกรณีเดียวกับฉัน)

หากข้อผิดพลาดอยู่ในไฟล์. specs app / app.component.spec.ts (7,3): ข้อผิดพลาด TS2304: ไม่พบชื่อ 'beforeEach'

เพิ่มสิ่งนี้ไปที่ด้านบนของไฟล์ของคุณและติดตั้ง npm rxjs

นำเข้า {range} จาก 'rxjs'; นำเข้า {map, filter} จาก 'rxjs / โอเปอเรเตอร์';