From 3bc52a3e7fd5ecddef457756ded8dfeee763da75 Mon Sep 17 00:00:00 2001
From: Ken-ichi Ueda <kenichi.ueda@gmail.com>
Date: Tue, 7 Feb 2023 23:41:56 -0500
Subject: [PATCH] Minor touch-ups for unique keys and tests not wrapped in act

---
 src/components/DisplayTaxonName.js            | 11 +++++++-
 .../ObservationLocation.test.js               | 27 +++++++------------
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/components/DisplayTaxonName.js b/src/components/DisplayTaxonName.js
index c3b0c7b74..7bd22f67e 100644
--- a/src/components/DisplayTaxonName.js
+++ b/src/components/DisplayTaxonName.js
@@ -39,7 +39,16 @@ const DisplayTaxonName = ( {
     const text = piece + spaceChar;
     const TextComponent = scientificNameFirst || !commonName ? Body1 : Body3;
     return (
-      isItalics ? <TextComponent className="italic">{text}</TextComponent> : text
+      isItalics
+        ? (
+          <TextComponent
+            key={`DisplayTaxonName-${taxon.id}-${piece}`}
+            className="italic"
+          >
+            {text}
+          </TextComponent>
+        )
+        : text
     );
   } );
 
diff --git a/tests/unit/components/SharedComponents/ObservationLocation.test.js b/tests/unit/components/SharedComponents/ObservationLocation.test.js
index b3164b383..5772032b6 100644
--- a/tests/unit/components/SharedComponents/ObservationLocation.test.js
+++ b/tests/unit/components/SharedComponents/ObservationLocation.test.js
@@ -3,14 +3,7 @@ import { ObservationLocation } from "components/SharedComponents";
 import React from "react";
 
 import factory from "../../../factory";
-import { renderComponent } from "../../../helpers/render";
-
-const mockLocationName = "San Francisco, CA";
-
-jest.mock( "sharedHooks/useLocationName", () => ( {
-  __esModule: true,
-  default: () => mockLocationName
-} ) );
+import { renderAppWithComponent } from "../../../helpers/render";
 
 describe( "ObservationLocation", () => {
   it( "should be accessible", () => {
@@ -20,45 +13,45 @@ describe( "ObservationLocation", () => {
     ).toBeAccessible();
   } );
 
-  it( "should format location correctly from place_guess", () => {
+  it( "should format location correctly from place_guess", async ( ) => {
     const mockObservation = factory( "RemoteObservation", {
       latitude: 30.18183,
       longitude: -85.760449,
       place_guess: "Panama City Beach, Florida"
     } );
 
-    renderComponent(
+    renderAppWithComponent(
       <ObservationLocation observation={mockObservation} />
     );
-    expect( screen.getByText( mockObservation.place_guess ) ).toBeTruthy();
+    expect( await screen.findByText( mockObservation.place_guess ) ).toBeTruthy();
   } );
 
-  it( "should format location correctly from latitude/longitude", () => {
+  it( "should format location correctly from latitude/longitude", async ( ) => {
     const mockObservation = factory( "RemoteObservation", {
       latitude: 30.18183,
       longitude: -85.760449,
       place_guess: null
     } );
 
-    renderComponent(
+    renderAppWithComponent(
       <ObservationLocation observation={mockObservation} />
     );
-    expect( screen.getByText(
+    expect( await screen.findByText(
       `${mockObservation.latitude}, ${mockObservation.longitude}`
     ) ).toBeTruthy();
   } );
 
-  it( "should show no location if unknown", () => {
+  it( "should show no location if unknown", async ( ) => {
     const mockObservation = factory( "RemoteObservation", {
       latitude: null,
       longitude: null,
       place_guess: null
     } );
 
-    renderComponent(
+    renderAppWithComponent(
       <ObservationLocation observation={mockObservation} />
     );
-    expect( screen.getByText(
+    expect( await screen.findByText(
       "Missing Location"
     ) ).toBeTruthy();
   } );