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 ? {text} : text
+ isItalics
+ ? (
+
+ {text}
+
+ )
+ : 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(
);
- 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(
);
- 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(
);
- expect( screen.getByText(
+ expect( await screen.findByText(
"Missing Location"
) ).toBeTruthy();
} );