副標題：SAP Spartacus SSR 最佳化的單元測試分析之一 : beforeEach

[文件](https://jasmine.github.io/api/edge/jasmine.html)

SAP Spartacus 裡這段程式碼：

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

```typescript
originalEngine = jasmine
        .createSpy('ngExpressEngine')
        .and.callFake(() => originalEngineInstance);
```

該方法接受一個字串作為建立的 Spy 的名稱，返回一個新的 Spy 物件。

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

這個新建立的 spy 物件，還是位於 jasmine namespace 之下。

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

spy.and: 返回 SpyStrategy 例項：

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

接下來，我們就可以透過這個 spy 物件的 strategy 方法，指派這個 spy 去做一些事情了。

callFake：callFake(fn)

> Tell the spy to call a fake implementation when invoked.

單步除錯 createSpy 方法：

轉交給 env：
![](https://img-blog.csdnimg.cn/img_convert/20d83285d8766643db605c95097e4bcb.png)

在 jasmine 內部，新建 strategy dispatcher 和 callTracker：

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

wrapper 的 and 屬性，來自 strategy dispatcher 的 and 屬性：
![](https://img-blog.csdnimg.cn/img_convert/30eaaf78c2ab9dcd85027ab7aa04ac90.png)

createSpy 最後返回的是 wrapper：
![](https://img-blog.csdnimg.cn/img_convert/0faf6081fdb39f7f1cf8d339e76b9ec0.png)

wrapper.and 指向 strategy：
![](https://img-blog.csdnimg.cn/img_convert/17f3e9f547571af91abd67abd458f3a4.png)

呼叫 strategy 的 callFake 方法：
![](https://img-blog.csdnimg.cn/img_convert/965d0707139f82366ec650fb9ee267e9.png)

其實就是把透過 callFake 傳入的函式，賦給 Strategy 物件的 plan 欄位：
![](https://img-blog.csdnimg.cn/img_convert/f05e494e0f40b6376ed3d50fbb08ef4e.png)

callFake 是一個鏈式呼叫，返回 wrapper 即 span 本身：
![](https://img-blog.csdnimg.cn/img_convert/75fc3bde462d5e25a590a2c2f2e81449.png)

同理，建立另一個 id 為 ngExpressEngineInstance 的 wrapper spy，將一個空的函式賦給 strategy 物件的 plan 屬性：

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

進入 decorator 的 get 方法，也就是我們要測試的方法：
![](https://img-blog.csdnimg.cn/img_convert/c5bb03d23d47d546e021b3fd00e47bb2.png)

此處 45行傳入的 originalEngine 為 spy.

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

執行這個 mock 方法：
![](https://img-blog.csdnimg.cn/img_convert/a3186bd245c76b198e5ac6cab7248111.png)

並且以下列這些輸入引數執行 spy：
![](https://img-blog.csdnimg.cn/img_convert/4c42719c386fb6560ac36b3b5cdd59e4.png)

當 spy 被執行時，其執行的上下文會自動被 jasmine 框架所記錄，這是透過 callTracker 完成的。
![](https://img-blog.csdnimg.cn/img_convert/1a903b4a5509d7167f3df18b334688b7.png)

returnValue，則是透過 strategyDispatcher 所指定。

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

如果我們的單元測試程式碼裡，使用 and 指定了這個 spy 被呼叫之後，應該返回什麼樣的值，則這些指定值，在上圖第 7687 行程式碼被返回。

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

在我們待測試的 get 方法裡，最終會執行 originalEngine.

而這個 engine 已經被 spy 過了，所以執行 spy 後的版本。

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

mock 之後的 originalEngine，被呼叫時，會返回其 callFake 方法指定的函式的返回值，即 originalEngineInstance.

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

其原因如下，因為 spyStrategy 的 exec 方法，執行的函式就是之前用 callFake 呼叫，繫結到 plan 屬性指向的函式：originalEngine = strategy.callFake(() => originalEngineInstance);

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

這個 originalEngineInstance 也是一個 spy：
![](https://img-blog.csdnimg.cn/img_convert/52db31bda9a96334d0af7cfcc8c3fa4b.png)

返回的 originalEngineInstance：

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

只要使用 spy 過的函式進行呼叫，則呼叫時傳入的引數和返回值必定會被 jasmine 記錄在案：
![](https://img-blog.csdnimg.cn/img_convert/90db6b15cb918a542360d6b3154e45d6.png)

使用 mock 過的 spy 呼叫，記錄這三個輸入引數：
![](https://img-blog.csdnimg.cn/img_convert/5a9223caec4ad28e51ae5c716de3c3ea.png)

Jest 測試框架 beforeEach 的設計原理解析

相關文章