add "throwSuggest" to testing library config and follow best practices

Author: electricmonk

packages/client/setupTests.ts

@@ -1,6 +1,5 @@
 import '@testing-library/jest-dom';
 import '@testing-library/react';
+import {configure} from "@testing-library/react";
 
-beforeAll(() => {
-    global.IS_REACT_ACT_ENVIRONMENT = false;
-});
+configure({throwSuggestions: true});

packages/client/src/adapters/harness.tsx

@@ -26,20 +26,20 @@ export async function makeApp({
 
     const addProductToCart = async (title: string) => {
         const product = await app.findByLabelText(title)
-        const add = within(product).getByText("Add");
+        const add = within(product).getByRole('button', { name: /add to cart/i });
         await userEvent.click(add);
     }
 
     const viewCart = async () => {
-        await userEvent.click(await app.findByText("View cart"));
+        await userEvent.click(await app.findByRole('button', { name: /view cart/i }));
     }
 
     const checkout = async () => {
-        await userEvent.click(app.getByText("Checkout"));
+        await userEvent.click(app.getByRole('button', { name: /checkout/i }));
     }
 
     const home = async () => {
-        await userEvent.click(app.getByText("Home"));
+        await userEvent.click(app.getByRole('button', { name: /home/i }));
     }
 
     const driver = {

packages/client/src/components/Cart.tsx

@@ -29,7 +29,7 @@ export const Cart: React.FC<CartProps> = ({id, onCheckout}) => {
 
     return <section>
         <ul>
-            {summary?.items.map(({productId, name}) => <li key={productId}>{name}</li>)}
+            {summary?.items.map(({productId, name}) => <li key={productId} aria-label={name}>{name}</li>)}
         </ul>
         <button aria-label="Checkout" role="button" onClick={checkoutAndViewOrder}>Checkout</button>
     </section>

packages/client/src/components/OrderSummary.tsx

@@ -19,7 +19,7 @@ export const OrderSummary: React.FC<{}> = () => {
         <h2>Thank You</h2>
         <span> {order?.id}</span>
         <ul>
-            {order?.items.map(({productId, name}) => <li key={productId}>{name}</li>)}
+            {order?.items.map(({productId, name}) => <li key={productId} aria-label={name}>{name}</li>)}
         </ul>
         <button aria-label="Home" role="button" onClick={() => navigate("/")}>Home</button>
 

packages/client/src/components/Shop.tsx

@@ -17,7 +17,7 @@ export const Shop: React.FC<ShopProps> = ({ cartId }) => {
         {fetched && (<p aria-label={`${itemCount} items in cart`}>{itemCount} items in cart</p>)}
         {fetched && !!itemCount && <button aria-label="View cart" role="button" onClick={viewCart}>View cart</button>}
         <section>
-            <input type="text" placeholder="Search products" value={freeTextSearch} onChange={(e) => setFreeTextSearch(e.target.value)}/>
+            <input type="text" aria-label="free-text-search" placeholder="Search products" value={freeTextSearch} onChange={(e) => setFreeTextSearch(e.target.value)}/>
             <button aria-label="Search">Search</button>
         </section>
         <Products addItem={addItem} products={products} isLoading={productsLoading} error={productsError} />

packages/client/test/purchase.flow.spec.tsx

@@ -10,17 +10,17 @@ test("a user can purchase a product, see the confirmation page and see their ord
     });
     const {driver, orderRepo} = harness;
 
-    await driver.findByText("0 items in cart");
+    await driver.findByRole('paragraph', { name: /0 items in cart/i });
 
     await driver.addProductToCart(moogOne.title);
-    await driver.findByText("1 items in cart");
+    await driver.findByRole('paragraph', { name: /1 items in cart/i });
 
     await driver.viewCart();
-    expect(await driver.findByText(moogOne.title)).toBeTruthy();
+    expect(await driver.findByRole('listitem', { name: moogOne.title })).toBeTruthy();
 
     await driver.checkout();
-    expect(await driver.findByText("Thank You")).toBeTruthy();
-    expect(await driver.findByText(moogOne.title)).toBeTruthy();
+    expect(await driver.findByRole('heading', { name: /thank you/i })).toBeTruthy();
+    expect(await driver.findByRole('listitem', {name: moogOne.title})).toBeTruthy();
 
     expect(orderRepo.orders).toContainEqual(expect.objectContaining({
         items: expect.arrayContaining([
@@ -31,7 +31,5 @@ test("a user can purchase a product, see the confirmation page and see their ord
     }));
 
     await driver.home();
-    await driver.findByText("0 items in cart");
-
-
+    await driver.findByRole('paragraph', { name: /0 items in cart/i });
 })

packages/client/test/search.flow.spec.tsx

@@ -13,11 +13,11 @@ test("Product search is case-insensitive", async () => {
     });
     const {driver} = harness;
 
-    await userEvent.type(driver.getByPlaceholderText('Search products'), 'moog');
-    await userEvent.click(driver.getByLabelText('Search'));
+    await userEvent.type(driver.getByRole('textbox', {name: 'free-text-search'}), 'moog');
+    await userEvent.click(driver.getByRole('button', { name: /search/i }));
 
-    expect(driver.queryByText(moogOne.title)).toBeInTheDocument();
-    expect(driver.queryByText(minimoog.title)).toBeInTheDocument();
-    expect(driver.queryByText(ob8x.title)).not.toBeInTheDocument();
+    expect(driver.queryByRole('heading', { name: moogOne.title })).toBeInTheDocument();
+    expect(driver.queryByRole('heading', { name: minimoog.title })).toBeInTheDocument();
+    expect(driver.queryByRole('heading', { name: ob8x.title })).not.toBeInTheDocument();
 
 })