How to write tests for React in 2020

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

// src/App.test.jsimport React from 'react';import { render } from '@testing-library/react';import App from './App';test('renders learn react link', () => {  const { getByText } = render(<App />); //render is from @testing-library/react  const linkElement = getByText(/learn react/i);  expect(linkElement).toBeInTheDocument(); //expect assertion is from Jest});

// setupTests.js// Jest is importing from a global setup file if you wonderimport '@testing-library/jest-dom/extend-expect';

// navBar.test.jsimport React from 'react'; // use "screen" - a newer way to utilize query in 2020 import { render, screen } from '@testing-library/react'; import NavBar from './navBar'; // component to testtest('render about link', () => {  render(<NavBar />);  expect(screen.getByText(/about/)).toBeInTheDocument();})

// navBar.jsimport React from 'react';const NavBar = () => (  <div className="navbar">    <a href="#">      about    </a>  </div>);export default NavBar;

// navBar.test.jsimport React from 'react';import { render, screen } from '@testing-library/react';import NavBar from './navBar';// include as many test cases as you want hereconst links = [  { text: 'Home', location: "/" },  { text: 'Contact', location: "/contact" },  { text: 'About', location: "/about" },  { text: 'Search', location: "/search" },];// I use test.each to iterate the test cases abovetest.each(links)(  "Check if Nav Bar have %s link.",  (link) => {    render(<NavBar />);//Ensure the text is in the dom, will throw error it can't find    const linkDom = screen.getByText(link.text); //use jest assertion to verify the link property    expect(linkDom).toHaveAttribute("href", link.location);  });test('Check if have logo and link to home page', () => {  render(<NavBar />);        // get by TestId define in the navBar    const logoDom = screen.getByTestId(/company-logo/);         // check the link location    expect(logoDom).toHaveAttribute("href", "/");     //check the logo image  expect(screen.getByAltText(/Company Logo/)).toBeInTheDocument(); });

// navBar.jsimport React from 'react';const NavBar = () => (  <div className="navbar">    <a href="/" data-testid="company-logo">      <img src="/logo.png" alt="Company Logo" />    </a>    <ul>      <li>        <a href="/"> Home </a>      </li>      <li>        <a href="/about"> About </a>      </li>      <li>        <a href="/contact"> Contact </a>      </li>      <li>        <a href="/search"> Search </a>      </li>    </ul>  </div>);export default NavBar;

/*  Prepare some test cases, ensure 90% edge cases are covered.    You can always change your test cases to fit your standard*/const entries = [  { name: 'John', email: 'john_doe@yahoo', password: 'helloworld' },  { name: 'Jo', email: 'jo.msn.com', password: 'pa$$W0rd' },  { name: '', email: '[email protected]', password: '123WX&abcd' },  { name: 'kent'.repeat(10), email: '[email protected]', password: 'w%oRD123yes' },  { name: 'Robert', email: '[email protected]', password: 'r&bsEc234E' },]

// signupForm.test.js// this mostly a input validate testdescribe('Input validate', () => {  /*    I use test.each to iterate every case again   I need use 'async' here because wait for    validation is await function   */      test.each(entries)('test with %s entry', async (entry) => {     ...    })})

// signupForm.test.js...test.each(entries)('test with %s entry', async (entry) => { //render the component first (it will clean up for every iteration        render(<SignupForm />); /*  grab all the input elements. I use 2 queries here because sometimes you can choosehow your UI look (with or without Label text) withoutbreaking the tests*/       const nameInput = screen.queryByLabelText(/name/i)      || screen.queryByPlaceholderText(/name/i);    const emailInput = screen.getByLabelText(/email/i)      || screen.queryByPlaceholderText(/email/i);    const passwordInput = screen.getByLabelText(/password/i)      || screen.queryByPlaceholderText(/password/i);/* use fireEvent.change and fireEvent.blur to change name input valueand trigger the validation*/    fireEvent.change(nameInput, { target: { value: entry.name } });     fireEvent.blur(nameInput); /* first if-statement to check whether the name is input.second if-statement to check whether the name is valid.'checkName' is a utility function you can define by yourself.I use console.log here to show what is being checked.  */if (entry.name.length === 0) {      expect(await screen.findByText(/name is required/i)).not.toBeNull();      console.log('name is required.');    }    else if (!checkName(entry.name)) {      // if the name is invalid, error msg will showup somewhere in the form      expect(await screen.findByText(/invalid name/i)).not.toBeNull();      console.log(entry.name + ' is invalid name.');    };// With a similar structure, you can continue building the rest of the test.        .../*  Remember to add this line at the end of your test to avoid act wrapping warning.More detail please checkout Kent C.Dodds's post:(He is the creator of Testing Library)https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning*/     await act(() => Promise.resolve()); })...

// signupForm.jsimport React from 'react';/* I borrow the sample code from formik library with some adjustmentshttps://jaredpalmer.com/formik/docs/overview#the-gist*/import { Formik } from 'formik';/* For validation check, I wrote 3 custom functions.(I use the same functions in test)*/import {  checkName,  checkEmail,  checkPassword,} from '../utilities/check';const SignupForm = () => (  <div>    <h1>Anywhere in your app!</h1>    <Formik      initialValues={{ name: '', email: '', password: '' }}      validate={values => {        const errors = {};        if (!values.name) {          errors.name = 'Name is Required'        } else if (!checkName(values.name)) {          errors.name = `invalid name`;        }        if (!values.email) {          errors.email = 'Email is Required';        }        else if (!checkEmail(values.email)) {          errors.email = 'Invalid email address';        }        if (!values.password) {          errors.password = 'Password is Required';        } else if (!checkPassword(values.password)) {          errors.password = 'Password is too simple';        }        return errors;      }}      onSubmit={(values, { setSubmitting }) => {        setTimeout(() => {          alert(JSON.stringify(values, null, 2));          setSubmitting(false);        }, 400);      }}    >      {({        values,        errors,        touched,        handleChange,        handleBlur,        handleSubmit,        isSubmitting,        /* and other goodies */      }) => (          <form onSubmit={handleSubmit}>            <label>              Name:            <input                type="text"                name="name"                placeholder="Enter your name here"                onChange={handleChange}                onBlur={handleBlur}                value={values.name}              />            </label>            <p style={{ 'color': 'red' }}>              {errors.name && touched.name && errors.name}            </p>            <label>              Email:            <input                type="email"                name="email"                placeholder="Your Email Address"                onChange={handleChange}                onBlur={handleBlur}                value={values.email}              />            </label>            <p style={{ 'color': 'red' }}>              {errors.email && touched.email && errors.email}            </p>            <label>              Password:            <input                type="password"                name="password"                placeholder="password here"                onChange={handleChange}                onBlur={handleBlur}                value={values.password}              />            </label>            <p style={{ 'color': 'red' }}>              {errors.password && touched.password && errors.password}            </p>            <button type="submit" disabled={isSubmitting}>              Submit          </button>          </form>        )}    </Formik>  </div>);export default SignupForm;