模擬es6模塊返回工廠功能（moment.js）

Question

警告：我是Jest的新手所以熊。

我試圖使用名為DateFilter的Jest測試Vue2.js過濾器。 此過濾器只是將日期格式應用於傳遞給它的日期。

DateFilter.js

import Vue from 'vue';
import moment from 'moment';

const dateFormatter = (dateValue, dateFormat) => {
    return moment(dateValue).format(dateFormat);
};

Vue.filter('date', dateFormatter);

export default dateFormatter;

所以，我在這里看到三個有效的單元測試

1. DateFilter模塊應該導出一個函數

2. 日期過濾器應該在傳遞dateValue的情況下初始化時刻

3. 日期過濾器應該在傳遞dateFormat時調用format方法

DateFilter.test.js

import moment from 'moment';
import DateFilter from './DateFilter';

describe('DateFilter', () => {
    it('should exist', () => {
        expect(DateFilter).toBeDefined();
        expect(typeof DateFilter).toBe('function');
    });

    it('should moment.format with the dateValue and dateFormat passed.', () => {
        // Here I get lost in how to spyOn moment function and the .format function
        const mockDateFormat = `dateFormat-${Math.random()}`;
        const mockDate = `mockDate-${Math.random()}`;
        jest.mock('moment', () => {
            return { format: jest.fn() }
        });
        // expect moment to have been called with mockDate
        // expect moment(mockDate) to have been called with mockDateFormat
    });
});

Answer 1

不確定你想要測試一些細節，但我猜這個秘密是對momentjs的好模擬。 由於您只想測試dateFormatter，您可以執行下一步：

首先我們將模擬設置為momentjs：

jest.mock('moment', () => {
    const momentMock = { format: jest.fn() }

    return jest.fn(() => momentMock);
});

如果不是聲明const，而是嘗試將對象傳遞給jest.fn你可能會得到函數未被調用的錯誤，那是因為我們每次調用時都會生成不同的模擬，而不是對所有的模擬具有相同的模擬moment電話。

這是一個非常簡單的，你可以做一個更詳細的時刻模擬，但我認為不值得努力，因為你的功能很簡單。

然后，我認為你已經分開了單元測試，你可以將它們合二為一，但有時候最好分別斷言函數鏈。

it('calls moment with the dateValue passed.', () => {
    const mockDateFormat = `dateFormat-${Math.random()}`;
    const mockDate = `mockDate-${Math.random()}`;

    dateFormatter(mockDate, mockDateFormat);

    expect(moment).toHaveBeenCalledWith(mockDate)
});
it('calls format with the dateFormat passed.', () => {
    const mockDateFormat = `dateFormat-${Math.random()}`;
    const mockDate = `mockDate-${Math.random()}`;

    dateFormatter(mockDate, mockDateFormat);

    expect(moment(mockDate).format).toHaveBeenCalledWith(mockDateFormat)
});

免責聲明：在第二次測試中，如果你期待moment(), moment(mockDate) or moment('Whatever')並不重要，因為你總是嘲笑同樣的事情，你會得到相同的format模擬。

如果你想要更復雜的東西，你需要創建一個夾具，在那里你將調用了momentjs的日期映射到包含模擬函數的新對象。 但我相信這更麻煩，實際上你只需要測試那個時刻已被調用並且該格式已被調用。 否則，您正在測試第三方庫的工作方式。

希望這會給你一些指導