[React Testing] Use Generated Data in Tests with tests-data-bot to Improve Test Maintainability
React to in with Data use test Testing
2023-09-14 09:00:47 时间
A really important aspect of TDD is the refactor phase. A critical piece to making your tests easier to maintain is using code structure and values to communicate what is important and what is not. We’ll use data generation with test-data-bot to communicate that the specific data values are irrelevant and it’s just what kind of data it is. Let’s refactor our tests to communicate this effectively.
Install:
yarn add test-data-bot
Test:
import React from 'react' import { render, fireEvent, waitFor } from '@testing-library/react' import { Redirect as MockRedirect } from 'react-router' import { savePost as mockSavePost } from '../extra/api' import { Editor } from '../extra/redirect' import '@testing-library/jest-dom/extend-expect' import {build, fake, sequence} from 'test-data-bot' // Mock Router redirect jest.mock('react-router', () => { return { Redirect: jest.fn(() => null), } }) jest.mock('../extra/api') afterEach(() => { jest.clearAllMocks() }) const postBuilder = build('Post').fields({ title: fake(f => f.lorem.words()), content: fake(f => f.lorem.paragraphs().replace(/\r/g, '')), tags: fake(f => [f.lorem.word(), f.lorem.word(), f.lorem.word()]), }) const userBuilder = build('User').fields({ id: sequence(s => `user-${s}`), }) test('renders a form with title, content, tags, and a submit button', async () => { mockSavePost.mockResolvedValueOnce() const fakeUser = userBuilder() const { getByLabelText, getByText } = render(<Editor user={fakeUser} />) const fakePost = postBuilder() 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, authorId: fakeUser.id, }) expect(mockSavePost).toHaveBeenCalledTimes(1) await waitFor(() => expect(MockRedirect).toHaveBeenCalledWith({ to: '/' }, {}), ) })
相关文章
- [Typescript + React] Tips: Write your own 'PropsFrom' helper to extract props from any React component
- [Typescript + React] Tip: Use generics in React to make dynamic and flexible components
- [React] Refactor componentWillReceiveProps() to getDerivedStateFromProps() in React 16.3
- [React] How to use a setState Updater Function with a Reducer Pattern
- [Recompose] Pass a React Prop to a Stream in RxJS
- [React] Call setState with null to Avoid Triggering an Update in React 16
- [React ] React Fundamentals: Component Lifecycle - Mounting Usage
- ahooks 最好的react hook库
- [React Recoil] Use a Recoil atom to share state between two React components
- [React Testing] Test a Custom React Hook with renderHook from React Hooks Testing Library
- [React] When to useReducer instead of useState
- [React] Refactor componentWillReceiveProps() to getDerivedStateFromProps() in React 16.3
- [React] How to use a setState Updater Function with a Reducer Pattern
- [React] Pass a function to setState in React
- [Recompose] Pass a React Prop to a Stream in RxJS
- [React Router v4] Redirect to Another Page
- [React] Use React Context to Manage Application State Through Routes
- [React Native] Animate Styles of a React Native View with Animated.timing
- react面试题-setState可能是异步更新(是同步还是异步)?
- react路由v6讲解
- React.js初探