舉報 
會員
Mastering React Test：Driven Development
ManyprogrammersareawareofTDDbutstruggletoapplyitbeyondbasicexamples.Thisbookteacheshowtobuildcomplex,real-worldapplicationsusingTest-DrivenDevelopment(TDD).IttakesafirstprinciplesapproachtotheTDDprocessusingplainJestandincludestest-drivingtheintegrationoflibrariesincludingReactRouter,Redux,andRelay(GraphQL).Readerswillpracticesystematicrefactoringwhilebuildingouttheirowntestframework,gainingadeepunderstandingofTDDtoolsandtechniques.Theywilllearnhowtotest-drivefeaturessuchasclient-andserver-sideformvalidation,datafilteringandsearching,navigationanduserworkflow,undo/redo,animation,LocalStorageaccess,WebSocketcommunication,andqueryingGraphQLendpoints.ThebookcoversrefactoringcodebasestousetheReactRouterandReduxlibraries.viaTDD.Reduxisexploredindepth,withreducers,middleware,sagas,andconnectedReactcomponents.ThebookalsocoversacceptancetestingusingCucumberandPuppeteer.ThebookisfullyuptodatewithReact16.9andhasin-depthcoverageofhooksandthe‘act’testhelper.
最新章節
- Leave a review - let other readers know what you think
- Other Books You May Enjoy
- Further learning
- Summary
- Spiking and deleting code
- When quality doesn't matter
品牌：中圖公司
上架時間：2021-06-24 12:20:27
出版社：Packt Publishing
本書數字版權由中圖公司提供，并由其授權上海閱文信息技術有限公司制作發行
- Leave a review - let other readers know what you think 更新時間：2021-06-24 14:45:49
- Other Books You May Enjoy
- Further learning
- Summary
- Spiking and deleting code
- When quality doesn't matter
- Not testing at all
- Canary testing
- Snapshot testing
- Property-based and generative testing
- Acceptance tests
- Integration tests
- Automated testing
- Debugging in the browser
- Exploratory testing
- Testing the whole product
- Demonstrating software
- Manual testing
- Improving your technique
- Best practices for your unit tests
- Test-driven development as a testing technique
- Understanding TDD in the Wider Testing Landscape
- Summary
- Exercises
- Updating step definitions to use waitForSelector
- Alerting when the animation is complete
- Adding better wait support
- Updating sagas to reset or replay state
- Adding a dialog box
- Fixing acceptance tests by test-driving production code
- Adding acceptance tests for a dialog box
- Adding Features Guided by Acceptance Tests
- Summary
- Using data tables to perform setup
- Writing your first Cucumber test
- Integrating Cucumber and Puppeteer into your code base
- Writing Your First Acceptance Test
- Section 4: Acceptance Testing with BDD
- Further learning
- Exercises
- Summary
- Updating the app
- Streaming events with redux-saga
- Test-driving a WebSocket connection
- Splitting apart the saga
- The new UI elements
- Designing a WebSocket interaction
- Working with WebSockets
- Exercises
- Summary
- Rotating the turtle
- Cleaning up after useEffect
- Drawing lines
- Animating with requestAnimationFrame
- Building an AnimatedLine component
- Extracting out StaticLines
- Designing the component
- Isolating components for animation
- Adding Animation
- Further learning
- Summary
- Requesting focus in other components
- Focusing the prompt
- Adding the reducer to the store
- Writing the reducer
- Changing keyboard focus
- Building middleware
- Saving to LocalStorage via Redux middleware
- Building buttons
- Attaching the new reducer
- Handling the redo action
- Handling the undo action
- Setting the initial state
- Building the reducer
- Undoing and redoing user actions in Redux
- Looking through the codebase
- Studying the Spec Logo user interface
- Building a Logo Interpreter
- Section 3: Interactivity
- Further learning
- Exercises
- Summary
- Compiling Relay queries
- Tying it together in App
- Building the CustomerHistory component
- Building the GraphQL reducer
- Testing the Relay environment
- Installing Relay
- Test-driving GraphQL
- Further learning
- Exercises
- Summary
- Separating Redux connection from presentation
- Navigating router history in a Redux saga
- Stubbing out components built with useMemo
- Shifting workflow to Redux
- Protecting against silent breakages
- Submitting a React form by dispatching a Redux action
- Building a helper function to render with store
- Switching out component state for Redux state
- Pulling out generator functions for reducer actions
- Completing the reducer
- Making asynchronous requests with sagas
- Setting up an entrypoint
- Scaffolding a reducer
- Scaffolding the saga and reducer
- Designing the state object
- Test-driving a Redux saga
- Prerequisites
- Test-driving Redux
- Further learning
- Exercises
- Summary
- Replacing onChange handlers with history.push
- Using a parent component to convert a query string to props
- Replacing onClick handlers with Link components
- Using the location query string to store component state
- Changing location using history.push
- Invoking render functions and inspecting their properties
- Testing the default route
- Using the Router Switch component
- Building a root component
- Avoiding withRouter
- Passing React Router props down through your components
- Using shallow rendering for the simplest results
- General rules for test-driving React Router
- Test-driving React Router
- Exercises
- Summary
- Specifying the render prop in App
- Adding table row actions
- Refactoring to simplify component design
- Filtering data
- Adding a previous page button
- Adding a next page button
- Paging through a large data set
- Displaying tabular data fetched from an endpoint
- Filtering and Searching Data
- Further learning
- Exercises
- Summary
- Refactoring long methods
- Indicating that the form has been submitted
- Handling server errors
- Extracting non-React functionality into a new module
- Submitting the form
- Performing client-side validation
- Humanizing Forms
- Section 2: Building a Single-Page Application
- Further learning
- Summary
- Building a new root component
- Encapsulating render output to dry up tests
- Listing element children
- Building shallow renderer helpers
- Understanding the importance of spiking
- Working with the shallow renderer
- Passing through props to the child component
- Passing customer data through to AppointmentForm
- Using props within useEffect
- Stubbing exported constants
- Fetching data on load with useEffect
- Creating a User Interface
- Further learning
- Exercises
- Summary
- Drying up DOM events
- Extracting container.querySelectorAll
- Drying up DOM queries
- Using jest.spyOn to spy on module mocks
- Extracting spy helpers
- Using Jest to spy and stub
- Extracting test helpers
- Displaying errors to the user
- Acting on the fetch response
- Acting on return values with stubs
- Installing the window.fetch polyfill
- Replacing global variables with spies
- Stubbing the fetch API
- Using a Jest matcher to simplify expectations
- Making spies reusable
- Watching it fail
- Untangling Arrange-Act-Assert
- Submitting forms using spies
- Learning to avoid fakes
- What is a test double?
- Exploring Test Doubles
- Further learning
- Exercises
- Summary
- Manually testing your solution
- Finishing it off
- Hiding input controls
- Displaying radio buttons for available appointments
- Constructing a calendar view
- Making a choice from radio buttons
- Completing the remaining tests for the select box
- Pre-selecting a value
- Utilizing defaultProps to specify real data
- Providing options to a dropdown
- Selecting from a dropdown
- Finishing off the form with a submit button
- Modifying handleChange to work with multiple fields
- Solving a batch of tests
- Generating parameterized tests
- Nesting describe blocks
- Duplicating fields
- Using state instead of props
- Submitting a form with data
- Saving the customer information
- Checking for null or not
- Labeling the field
- Extracting out a field-finder function
- Passing in an existing value
- Extracting an expectation group function
- Accepting text input
- Extracting a form-finder method
- Adding a form element
- Extracting a test helper
- Test-driving Data Input with React
- Further learning
- Exercises
- Summary
- Before you check in...
- Putting it all together with Webpack
- Adding an entrypoint
- Manually testing our changes
- Adding events to a functional component
- Initial selection of data
- Selecting data to view
- Specifying list items
- Rendering the list of appointments
- Rendering lists and detail views
- Streamlining your testing process
- Red green refactor
- Writing great tests
- Extracting methods
- Using a beforeEach block
- Promoting variables
- Refactoring your work
- Backtracking on ourselves
- Make it pass
- Rendering React from a test
- Writing your first expectation
- Writing a failing test
- Displaying data with your first test
- Bringing in React and Babel
- Commit early and often
- Creating a new Jest project
- Installing NPM
- Creating a new React project from scratch
- Technical requirements
- First Steps with Test-Driven Development
- Section 1: First Principles of TDD
- Reviews
- Get in touch
- Directory structure
- Object and array destructuring
- Arrow functions
- Prettier
- JavaScript syntax
- Understanding code snippets
- Conventions used
- Download the example code files
- Debugging when things go wrong
- Solving the exercises
- Working with section tags
- Getting started before Chapter 1
- Keeping up with the book's Git history
- To get the most out of this book
- What this book covers
- Who this book is for
- Preface
- Packt is searching for authors like you
- About the reviewer
- About the author
- Contributors
- Packt.com
- Why subscribe?
- About Packt
- Dedication
- Mastering React Test-Driven Development
- Copyright and Credits
- Title Page
- coverpage
- coverpage
- Title Page
- Copyright and Credits
- Mastering React Test-Driven Development
- Dedication
- About Packt
- Why subscribe?
- Packt.com
- Contributors
- About the author
- About the reviewer
- Packt is searching for authors like you
- Preface
- Who this book is for
- What this book covers
- To get the most out of this book
- Keeping up with the book's Git history
- Getting started before Chapter 1
- Working with section tags
- Solving the exercises
- Debugging when things go wrong
- Download the example code files
- Conventions used
- Understanding code snippets
- JavaScript syntax
- Prettier
- Arrow functions
- Object and array destructuring
- Directory structure
- Get in touch
- Reviews
- Section 1: First Principles of TDD
- First Steps with Test-Driven Development
- Technical requirements
- Creating a new React project from scratch
- Installing NPM
- Creating a new Jest project
- Commit early and often
- Bringing in React and Babel
- Displaying data with your first test
- Writing a failing test
- Writing your first expectation
- Rendering React from a test
- Make it pass
- Backtracking on ourselves
- Refactoring your work
- Promoting variables
- Using a beforeEach block
- Extracting methods
- Writing great tests
- Red green refactor
- Streamlining your testing process
- Rendering lists and detail views
- Rendering the list of appointments
- Specifying list items
- Selecting data to view
- Initial selection of data
- Adding events to a functional component
- Manually testing our changes
- Adding an entrypoint
- Putting it all together with Webpack
- Before you check in...
- Summary
- Exercises
- Further learning
- Test-driving Data Input with React
- Extracting a test helper
- Adding a form element
- Extracting a form-finder method
- Accepting text input
- Extracting an expectation group function
- Passing in an existing value
- Extracting out a field-finder function
- Labeling the field
- Checking for null or not
- Saving the customer information
- Submitting a form with data
- Using state instead of props
- Duplicating fields
- Nesting describe blocks
- Generating parameterized tests
- Solving a batch of tests
- Modifying handleChange to work with multiple fields
- Finishing off the form with a submit button
- Selecting from a dropdown
- Providing options to a dropdown
- Utilizing defaultProps to specify real data
- Pre-selecting a value
- Completing the remaining tests for the select box
- Making a choice from radio buttons
- Constructing a calendar view
- Displaying radio buttons for available appointments
- Hiding input controls
- Finishing it off
- Manually testing your solution
- Summary
- Exercises
- Further learning
- Exploring Test Doubles
- What is a test double?
- Learning to avoid fakes
- Submitting forms using spies
- Untangling Arrange-Act-Assert
- Watching it fail
- Making spies reusable
- Using a Jest matcher to simplify expectations
- Stubbing the fetch API
- Replacing global variables with spies
- Installing the window.fetch polyfill
- Acting on return values with stubs
- Acting on the fetch response
- Displaying errors to the user
- Extracting test helpers
- Using Jest to spy and stub
- Extracting spy helpers
- Using jest.spyOn to spy on module mocks
- Drying up DOM queries
- Extracting container.querySelectorAll
- Drying up DOM events
- Summary
- Exercises
- Further learning
- Creating a User Interface
- Fetching data on load with useEffect
- Stubbing exported constants
- Using props within useEffect
- Passing customer data through to AppointmentForm
- Passing through props to the child component
- Working with the shallow renderer
- Understanding the importance of spiking
- Building shallow renderer helpers
- Listing element children
- Encapsulating render output to dry up tests
- Building a new root component
- Summary
- Further learning
- Section 2: Building a Single-Page Application
- Humanizing Forms
- Performing client-side validation
- Submitting the form
- Extracting non-React functionality into a new module
- Handling server errors
- Indicating that the form has been submitted
- Refactoring long methods
- Summary
- Exercises
- Further learning
- Filtering and Searching Data
- Displaying tabular data fetched from an endpoint
- Paging through a large data set
- Adding a next page button
- Adding a previous page button
- Filtering data
- Refactoring to simplify component design
- Adding table row actions
- Specifying the render prop in App
- Summary
- Exercises
- Test-driving React Router
- General rules for test-driving React Router
- Using shallow rendering for the simplest results
- Passing React Router props down through your components
- Avoiding withRouter
- Building a root component
- Using the Router Switch component
- Testing the default route
- Invoking render functions and inspecting their properties
- Changing location using history.push
- Using the location query string to store component state
- Replacing onClick handlers with Link components
- Using a parent component to convert a query string to props
- Replacing onChange handlers with history.push
- Summary
- Exercises
- Further learning
- Test-driving Redux
- Prerequisites
- Test-driving a Redux saga
- Designing the state object
- Scaffolding the saga and reducer
- Scaffolding a reducer
- Setting up an entrypoint
- Making asynchronous requests with sagas
- Completing the reducer
- Pulling out generator functions for reducer actions
- Switching out component state for Redux state
- Building a helper function to render with store
- Submitting a React form by dispatching a Redux action
- Protecting against silent breakages
- Shifting workflow to Redux
- Stubbing out components built with useMemo
- Navigating router history in a Redux saga
- Separating Redux connection from presentation
- Summary
- Exercises
- Further learning
- Test-driving GraphQL
- Installing Relay
- Testing the Relay environment
- Building the GraphQL reducer
- Building the CustomerHistory component
- Tying it together in App
- Compiling Relay queries
- Summary
- Exercises
- Further learning
- Section 3: Interactivity
- Building a Logo Interpreter
- Studying the Spec Logo user interface
- Looking through the codebase
- Undoing and redoing user actions in Redux
- Building the reducer
- Setting the initial state
- Handling the undo action
- Handling the redo action
- Attaching the new reducer
- Building buttons
- Saving to LocalStorage via Redux middleware
- Building middleware
- Changing keyboard focus
- Writing the reducer
- Adding the reducer to the store
- Focusing the prompt
- Requesting focus in other components
- Summary
- Further learning
- Adding Animation
- Isolating components for animation
- Designing the component
- Extracting out StaticLines
- Building an AnimatedLine component
- Animating with requestAnimationFrame
- Drawing lines
- Cleaning up after useEffect
- Rotating the turtle
- Summary
- Exercises
- Working with WebSockets
- Designing a WebSocket interaction
- The new UI elements
- Splitting apart the saga
- Test-driving a WebSocket connection
- Streaming events with redux-saga
- Updating the app
- Summary
- Exercises
- Further learning
- Section 4: Acceptance Testing with BDD
- Writing Your First Acceptance Test
- Integrating Cucumber and Puppeteer into your code base
- Writing your first Cucumber test
- Using data tables to perform setup
- Summary
- Adding Features Guided by Acceptance Tests
- Adding acceptance tests for a dialog box
- Fixing acceptance tests by test-driving production code
- Adding a dialog box
- Updating sagas to reset or replay state
- Adding better wait support
- Alerting when the animation is complete
- Updating step definitions to use waitForSelector
- Exercises
- Summary
- Understanding TDD in the Wider Testing Landscape
- Test-driven development as a testing technique
- Best practices for your unit tests
- Improving your technique
- Manual testing
- Demonstrating software
- Testing the whole product
- Exploratory testing
- Debugging in the browser
- Automated testing
- Integration tests
- Acceptance tests
- Property-based and generative testing
- Snapshot testing
- Canary testing
- Not testing at all
- When quality doesn't matter
- Spiking and deleting code
- Summary
- Further learning
- Other Books You May Enjoy
- Leave a review - let other readers know what you think 更新時間：2021-06-24 14:45:49
