Awesome

Learning React TDD

Just one of the things I'm learning. https://github.com/hchiam/learning

Key summary notes: :key:

yarn add --dev @testing-library/jest-dom
yarn add --dev @testing-library/react
yarn add --dev @testing-library/user-event

import '@testing-library/jest-dom/extend-expect'
import React from 'react'
import {render, fireEvent, screen} from '@testing-library/react'
<!-- or -->
import { render } from '@testing-library/react';
render(...)
expect(screen.queryByText(...))...
fireEvent.click(...)
expect(screen.getByText(...))...

Tutorials I'm following:

Newer: @testing-library/react built into create-react-app

https://github.com/testing-library/react-testing-library (See newer-tdd sub-folder for more info.)

{
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
  }
}

Older: react-testing-library

https://www.freecodecamp.org/news/quick-guide-to-tdd-in-react-81888be67c64/ (NOTE: old dependencies being used in this old tutorial.)

{
  "dependencies": {
    "axios": "0.18.0",
    "axios-mock-adapter": "1.14.1",
    "react": "16.3.0",
    "react-dom": "16.3.0",
    "react-scripts": "1.1.0",
    "react-testing-library": "2.0.0"
  },
}

• axios -> https
• axios-mock-adapter -> mock https GET response
• react, react-dom -> JSX syntax in .js file
• react-scripts -> convenient CLI commands
• react-testing-library -> testing (see .test.js file in tests folder) -> render(...), Simulate.click(...), await wait(...):
  • in turn, render(...) gives you: getByText, queryByText, getByTestId, queryByTestId, container, etc.

Run tests

yarn # just once
yarn test # -> will automatically re-run when you hit save

Run demo

yarn # if you haven't already
yarn start # -> http://localhost:3000

You can generate a dependency graph with bash show_dep_graph.sh.

You can publish a live site to surge with bash publish_live_site.sh (Just go into the relevant enclosing src or public folder of your site files - a CNAME file is there for convenience).

This file was first created using the Yeoman generator generator-hchiam-learning.