Setting Up a Jest Test Environment with TypeScript

This challenge focuses on configuring a robust and reliable test environment for your TypeScript projects using Jest. A well-configured test environment ensures consistent test results across different machines and environments, isolating your tests from external dependencies and providing a predictable foundation for your automated testing suite.

Problem Description

You are tasked with creating a Jest test environment that mocks the Date object and provides a mock window object with a few essential properties. This is a common requirement when testing code that interacts with the browser environment or relies on the current date and time. The environment should:

1. Mock the Date object: Allow you to control the passage of time within your tests, enabling you to test time-dependent logic without relying on real-world time. The mock should allow setting a specific date.
2. Provide a mock window object: Simulate a basic browser environment, providing properties like location and navigator for testing code that interacts with the browser.
3. Export the test environment: Make the environment available for use in your Jest configuration.

Expected Behavior:

• When a test runs using this environment, the Date object should be replaced with a mock implementation.
• The window object should be available globally within the test scope.
• You should be able to set the mocked date using a method provided by the environment.
• The mock window object should have location and navigator properties.

Examples

Example 1:

// testEnvironment.ts
import { CustomMatchers } from './customMatchers';

export const setupTestEnvironment = () => {
  const mockDate = new MockDate();
  global.Date = mockDate;

  const mockWindow = {
    location: {
      href: 'https://example.com',
    },
    navigator: {
      userAgent: 'Mozilla/5.0',
    },
  };
  global.window = mockWindow;

  expect.extend(CustomMatchers);
};

class MockDate {
  private date: Date;

  constructor() {
    this.date = new Date();
  }

  setDate(newDate: Date) {
    this.date = newDate;
  }

  getDate(): Date {
    return this.date;
  }
}

// myComponent.test.ts
import { setupTestEnvironment } from './testEnvironment';

describe('My Component', () => {
  beforeEach(() => {
    setupTestEnvironment();
  });

  it('should use the mocked date', () => {
    const mockDate = new Date('2024-01-01');
    global.Date.setDate(mockDate);
    expect(global.Date.getDate()).toBe(1);
  });
});

Explanation: The setupTestEnvironment function mocks the Date object and provides a mock window object. The test then sets the date using global.Date.setDate() and asserts that the date is correctly set.

Constraints

• The solution must be written in TypeScript.
• The mock window object should include at least location.href and navigator.userAgent properties.
• The Date mock must provide a setDate method to control the date.
• The solution should be modular and reusable.
• The solution should not rely on external libraries beyond Jest and TypeScript.

Notes

• Consider using a class to encapsulate the mock Date object and its methods.
• Think about how to make the environment configurable, allowing for different mock window properties if needed.
• This is a foundational step for more complex mocking scenarios. You can extend this environment to mock other browser APIs as needed.
• You can add custom matchers to Jest to make assertions easier. (See Example 1 for a basic CustomMatcher)