212

Moment.js を使用して、React コンポーネントのヘルパー ファイルで日付ロジックのほとんどを実行していますが、Jest a la で日付をモックする方法を理解できませんでしたsinon.useFakeTimers()。

Jest のドキュメントではsetTimeout、setIntervalなどのタイマー関数についてのみ説明していますが、日付を設定してから、日付関数が意図したとおりに機能することを確認することはできません。

これが私のJSファイルの一部です：

var moment = require('moment');

var DateHelper = {
  
  DATE_FORMAT: 'MMMM D',
  API_DATE_FORMAT: 'YYYY-MM-DD',
  
  formatDate: function(date) {
    return date.format(this.DATE_FORMAT);
  },

  isDateToday: function(date) {
    return this.formatDate(date) === this.formatDate(moment());
  }
};


module.exports = DateHelper;

Jestを使用して設定したものは次のとおりです。

jest.dontMock('../../../dashboard/calendar/date-helper')
    .dontMock('moment');

describe('DateHelper', function() {
  var DateHelper = require('../../../dashboard/calendar/date-helper'),
      moment = require('moment'),
      DATE_FORMAT = 'MMMM D';

  describe('formatDate', function() {

    it('should return the date formatted as DATE_FORMAT', function() {
      var unformattedDate = moment('2014-05-12T00:00:00.000Z'),
          formattedDate = DateHelper.formatDate(unformattedDate);

      expect(formattedDate).toEqual('May 12');
    });

  });

  describe('isDateToday', function() {

    it('should return true if the passed in date is today', function() {
      var today = moment();

      expect(DateHelper.isDateToday(today)).toEqual(true);
    });
    
  });

});

私は瞬間を使用しており、関数は瞬間を使用しているため、これらのテストは成功しましたが、少し不安定なようで、テストのために日付を固定時間に設定したいと思います。

それをどのように達成できるかについてのアイデアはありますか？

4

21 に答える 21

0

目標は、コンポーネントのレンダリング中にテスト目的で new Date() が使用される場合は常に、日付を固定してモック化することです。new Date() fn をモックすることだけが必要な場合、ライブラリを使用するとオーバーヘッドが発生します。

アイデアは、グローバル日付を一時変数に保存し、グローバル日付をモックしてから、使用後に一時をグローバル日付に再割り当てすることです。

export const stubbifyDate = (mockedDate: Date) => {
    /**
     * Set Date to a new Variable
     */
    const MockedRealDate = global.Date;

    /**
     *  Mock Real date with the date passed from the test
     */
    (global.Date as any) = class extends MockedRealDate {
        constructor() {
            super()
            return new MockedRealDate(mockedDate)
        }
    }

    /**
     * Reset global.Date to original Date (MockedRealDate) after every test
     */
    afterEach(() => {
        global.Date = MockedRealDate
    })
}

Usage in your test would be like

import { stubbyifyDate } from './AboveMethodImplementedFile'

describe('<YourComponent />', () => {
    it('renders and matches snapshot', () => {
        const date = new Date('2019-02-18')
        stubbifyDate(date)

        const component = renderer.create(
            <YourComponent data={}/>
        );
        const tree = component.toJSON();
        expect(tree).toMatchSnapshot();
    });
});
于 2019-09-18T04:59:04.787 に答える