Test-Driven React 2 (Pragmatic Bookshelf)

PragmaticBookshelf
Learn the right way to do test-driven development with React. You'll come away knowing how to use the latest tools to streamline your entire workflow.

Trevor Burnham @TrevorBurnham

edited by Jacquelyn Carter @jkcarter

You work in a loop: write code, get feedback, adjust. The faster you get feedback, the faster you can learn and become a more effective developer. Turn your React project requirements into tests and get the feedback you need faster than ever before. Stay focused on what’s important by running your tests continuously in the background. The second edition of Test-Driven React has been extensively revised to reflect the latest tools and techniques for React development, including TypeScript. Combine the power of testing, linting, and typechecking directly in your coding environment to iterate on React components quickly and fearlessly!

React revolutionized web development by abstracting away the details of DOM manipulation. That conceptual elegance has opened the door to a new generation of web testing: clear, expressive, and lightning fast. That makes React a perfect fit for test-driven development (TDD), a methodology in which tests are a blueprint instead of an afterthought.

Each chapter presents new projects to challenge you and new tools to help you. Write fast, easy-to-understand tests with Vitest and React Testing Library. Keep your code tidy with ESLint and Prettier. Perform every task you need from a single window within VS Code. See your test output directly in your code with Wallaby. Style components in a test-friendly way with styled-components. By understanding every piece of your project’s stack, you’ll feel more confident and able to focus on what matters: writing reliable and maintainable code.

The second edition of Test-Driven React has been updated to use TypeScript, the language of choice for modern React development. Find and fix type errors without even running your code. Generate beautiful documentation from type annotations with Storybook, and update it on every commit with GitHub Actions.

Discover a more joyful React development experience. Let your tests lead the way!


Trevor Burnham is a front-end engineer at Amazon Web Services (AWS). His previous books include CoffeeScript and Async JavaScript, both published by The Pragmatic Bookshelf.


Don’t forget you can get 35% off with your Devtalk discount! Just use the coupon code “devtalk.com" at checkout :+1:

Latest Threads About This Book Top

amagnasco
Good evening @TrevorBurnham! Here’s a minor one. When adding the first react hook on page 74, the import statement is missing from the c...
New
amagnasco
Hi Trevor, I had picked up the original version of this book a while ago. I’m just now getting into several of the topics covered here, ...
New
amagnasco
Hi again! Here’s another change that would update the book for eslint ^8.25.0 (‘flat config’): On page 53, .eslintignore files were depre...
New
horneber
Then create a REACT.md project in the root of your test-driven-carousel project. This is probably meant to say create a README.md file.
New
horneber
Text says Refactoring components into HOCs has the advantage of keeping code in manageable units, but HOC are not used anymore (in the ...
New
New
New
horneber
@TrevorBurnham All three tests expect the same URL. One test does not use any button, one test moves forward, one backwards in the slide...
New
horneber
@TrevorBurnham The text after ❶ claims this is the first time we wrote a type definition for a function. The ImgComponent prop used way ...
New
horneber
@TrevorBurnham Text says: $ npm install --save-dev eslint-plugin-react-hooks@6.0.1 as of time of this writing, latest released version...
New

Most Active This Week Top

Most Active This Month Top

Most Active This Year Top

fixedgigha
@TrevorBurnham Maybe I missed it, but I think you need to add @testing-library/jest-dom to the compileOptions/types in tsconfig.json, ot...
New
psantos
@TrevorBurnham On page 39, it is presented the following command to format: "format": "eslint --fix . && prettier --loglevel wa...
New
fixedgigha
@TrevorBurnham figCaption in CarouselSlide.tsx has lost its data-testid attribute, so the test fails if copied as is
New
SwampDonkey
@TrevorBurnham I can’t even get the initial React project off the ground. The provided command; npm create vite@4.4.9 test-driven-carous...
New
SwampDonkey
We are asked to add .ts and .tsx to the extension list but the example package.json is exactly the same as we already have at this point....
New
horneber
@TrevorBurnham Text says You also added some powerful new tools to your belt, including webpack-dev-server, stylelint, and snapshots. we...
New
horneber
@TrevorBurnham Text says: $ npm install --save-dev eslint-plugin-react-hooks@6.0.1 as of time of this writing, latest released version...
New
horneber
Then create a REACT.md project in the root of your test-driven-carousel project. This is probably meant to say create a README.md file.
New
amagnasco
Hi again! Here’s another change that would update the book for eslint ^8.25.0 (‘flat config’): On page 53, .eslintignore files were depre...
New
horneber
@TrevorBurnham All three tests expect the same URL. One test does not use any button, one test moves forward, one backwards in the slide...
New
New
horneber
Text says Refactoring components into HOCs has the advantage of keeping code in manageable units, but HOC are not used anymore (in the ...
New
horneber
Text says Since the default value is numeric, try a string value but the default value implemented earlier in the chapter is a string, no...
New
horneber
@TrevorBurnham The text after ❶ claims this is the first time we wrote a type definition for a function. The ImgComponent prop used way ...
New
horneber
@TrevorBurnham const nextButton = screen.getByTestId("prev-button"); Small copy paste error, apparently.
New

Most Active Last Three Years Top

PragmaticBookshelf
Learn the right way to do test-driven development with React. You'll come away knowing how to use the latest tools to streamline your ent...
New
quackus
@TrevorBurnham Hi everyone, the book description on pragprog contains the following: […] easy-to-understand tests with Vitest and Rea...
New
fixedgigha
@TrevorBurnham Example: commit message is misleading :wrench: Move tests into their own folder This commit message doesn’t relate the ...
New
New
amagnasco
Hi Trevor, I had picked up the original version of this book a while ago. I’m just now getting into several of the topics covered here, ...
New
amagnasco
Good evening @TrevorBurnham! Here’s a minor one. When adding the first react hook on page 74, the import statement is missing from the c...
New

Most Active Over Three Years Top

Get money off!

The Pragmatic Bookshelf

35% off any eBook

Simply use coupon code "devtalk.com" at checkout. See full details here.