[React Testing] Test Drive Assertions with Dates in React
React in with test Testing Drive
2023-09-14 09:00:47 时间
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: '/'}, {})) })
相关文章
- [Node.js] Mock an API for Local Development in React with Mirage JS
- [React] Return a list of elements from a functional component in React
- [PWA] Cache JSON Data in a React PWA with Workbox, and Display it while Offline
- [React] Extend styles with styled-components in React
- [React] Reference a node using createRef() in React 16.3
- [GraphQL] Fetch Server Data and Client-side State in One Query using React Apollo + GraphQL
- [ReactVR] Add Lighting Using Light Components in React VR
- [React] Call setState with null to Avoid Triggering an Update in React 16
- [React] Create component variations in React with styled-components and "extend"
- [React] Update Component State in React With Ramda Lenses
- [React] Linting React JSX with ESLint (in ES6)
- [Node.js] Mock an API for Local Development in React with Mirage JS
- [React Testing] Mock react-transition-group in React Component Tests with jest.mock
- [React Testing] Use Generated Data in Tests with tests-data-bot to Improve Test Maintainability
- [React + CSS3] Create an Animate Content Placeholder for Loading State in React
- [PWA] Add Push Notifications to a PWA with React in Chrome and on Android
- [React] PureComponent in React
- [React] Call setState with null to Avoid Triggering an Update in React 16
- [React] Animate your user interface in React with styled-components and "keyframes"
- [React Native] Writing Platform-Specific Components for iOS and Android in React Native
- [React] Keep Application State in Sync with Browser History