[React Testing] Test Drive Assertions with Dates in React

Posted 2021-02-20 answer1215

Just make sure the date is in a range then it is fine

 

import React from ‘react‘
import {render, fireEvent, waitFor} from ‘@testing-library/react‘
import {Redirect as MockRedirect} from ‘react-router‘
import {savePost as mockSavePost} from ‘../api‘
import {Editor} from ‘../post-editor-05-dates‘

jest.mock(‘react-router‘, () => {
  return {
    Redirect: jest.fn(() => null),
  }
})

jest.mock(‘../api‘)

afterEach(() => {
  jest.clearAllMocks()
})

test(‘renders a form with title, content, tags, and a submit button‘, async () => {
  mockSavePost.mockResolvedValueOnce()
  const fakeUser = {id: ‘user-1‘}
  const {getByLabelText, getByText} = render(<Editor user={fakeUser} />)
  const fakePost = {
    title: ‘Test Title‘,
    content: ‘Test content‘,
    tags: [‘tag1‘, ‘tag2‘],
  }
  const preDate = new Date().getTime()

  getByLabelText(/title/i).value = fakePost.title
  getByLabelText(/content/i).value = fakePost.content
  getByLabelText(/tags/i).value = fakePost.tags.join(‘, ‘)
  const submitButton = getByText(/submit/i)

  fireEvent.click(submitButton)

  expect(submitButton).toBeDisabled()

  expect(mockSavePost).toHaveBeenCalledWith({
    ...fakePost,
    date: expect.any(String),
    authorId: fakeUser.id,
  })
  expect(mockSavePost).toHaveBeenCalledTimes(1)

  const postDate = new Date().getTime()
  const date = new Date(mockSavePost.mock.calls[0][0].date).getTime()
  expect(date).toBeGreaterThanOrEqual(preDate)
  expect(date).toBeLessThanOrEqual(postDate)

  await waitFor(() => expect(MockRedirect).toHaveBeenCalledWith({to: ‘/‘}, {}))
})