Angular 官網的程式碼：

https://angular.io/api/core/Injectable#providedin

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210413172301624.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2kwNDI0MTY=,size_16,color_FFFFFF,t_70)

我把這段程式碼原封不動地複製到我的 app.module.ts ，然後執行：

![](https://img-blog.csdnimg.cn/img_convert/f7e16e20f6a953895069db66b78c2853.png)

```typescript
@Injectable()
class UsefulService {
}

@Injectable()
class NeedsService {
  constructor(public service: UsefulService) { }
}

const injector = Injector.create({
  providers:
    [{ provide: NeedsService, deps: [UsefulService] }, { provide: UsefulService, deps: [] }]
});
expect(injector.get(NeedsService).service instanceof UsefulService).toBe(true);
```

遇到下面的錯誤訊息：

Uncaught ReferenceError: expect is not defined

![](https://img-blog.csdnimg.cn/img_convert/f62fc360ca14c5638f22ba0e91d3e762.png)

奇怪的是，Visual Studio Code 裡並沒有任何語法錯誤，而且 expect 的定義也能識別到：

![](https://img-blog.csdnimg.cn/img_convert/5b814502b9ea284e00f71a899330bf07.png)

然而執行時，expect 的值無法識別：not available

![](https://img-blog.csdnimg.cn/img_convert/fc3834d306fa292220f6e3e1431b20b9.png)

後來我在 medium 上一篇論文裡找到了答案：

https://medium.com/@danielrob/understand-angular-testing-with-jasmine-karma-8d1384962011

> realise the difference between the browser environment during a karma run vs that when it is being served by an http server

Karma 執行在瀏覽器環境上和執行在 HTTP 伺服器(server side)是有所差異的。

![](https://img-blog.csdnimg.cn/img_convert/5829bf70a91c4066a0282d273d604671.png)

當執行在瀏覽器裡時，describe，it，expect 這些函式均無法訪問。

而執行在伺服器上時，能正常訪問：

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210413172323211.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2kwNDI0MTY=,size_16,color_FFFFFF,t_70)

> During a karma run context, the window object has been populated with jasmine and angular-mock functions. Angular-mock came from our ‘karma.conf’ file list. Now that we understand these methods are being exposed on the window object, and where they come from, we are fit use them.

在 Karma 執行上下文，jasmine 和 Angular-mock 相關的函式，被生成並儲存在 window 物件上。Angular-mock 來自 karma.conf.

既然弄清楚了原因，也就不再繼續糾結 Angular 官網上的程式碼了，將 expect 改成 console.log 即可。

![](https://img-blog.csdnimg.cn/img_convert/57ba20476d08c0a6299dff1e7cee17b2.png)

按照Angular官網教程執行簡單的測試程式碼，會遇到expect is not defined的錯誤訊息

相關文章