Merge pull request #1710 from NYPL/DSD-1121/svgr-spike

DSD-1121: SVG testing update

CHANGELOG.md

@@ -8,6 +8,10 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+### Adds
+
+- Adds `jest-transformer-svg` to mock SVGs more accurately in our tests
+
 ### Fixes
 
 - Fixes `TextInput`'s conflicting internal and external ref values for the clearable button focus management.
@@ -16,7 +20,7 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ### Adds
 
-- Adds the `SubNav` component.
+- Adds the `"SubNav"`component.
 - Adds the `useScrollFadeStyles` hook.
 
 ### Updates

jest.config.js

@@ -16,7 +16,7 @@ export default {
   coverageDirectory: "coverage",
   // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
   moduleNameMapper: {
-    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
+    "\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
       "<rootDir>/src/__tests__/fileMock.ts",
     // Handle CSS imports (with CSS modules)
     // https://jestjs.io/docs/webpack#mocking-css-modules
@@ -38,6 +38,7 @@ export default {
   // A map from regular expressions to paths to transformers
   transform: {
     "^.+\\.(ts|tsx)$": "ts-jest",
+    "^.+\\.svg$": "jest-transformer-svg",
   },
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
   transformIgnorePatterns: [

src/__tests__/fileMock.ts

@@ -1,6 +1,5 @@
 /**
- * This file is use to mock asset imports in TSX files, mostly
- * used in our case to mock SVG files.
+ * This file is used to mock asset imports in TSX files.
  */
 
 export default "div";

src/components/Accordion/Accordion.test.tsx

@@ -156,12 +156,22 @@ describe("Accordion", () => {
     expect(accordionLabel).toHaveAttribute("aria-expanded", "false");
     // The panel's content should not be in the DOM unless the Accordion is open.
     expect(accordionPanelContent).not.toBeInTheDocument();
+    expect(screen.getByTitle("plus icon")).toBeInTheDocument();
+    expect(screen.getByTitle("plus icon")).toHaveAttribute(
+      "data-file-name",
+      "SvgPlus"
+    );
 
     userEvent.click(accordionLabel);
 
     accordionPanelContent = screen.queryByText(/operates the village store/i);
     expect(accordionLabel).toHaveAttribute("aria-expanded", "true");
     expect(accordionPanelContent).toBeInTheDocument();
+    expect(screen.getByTitle("minus icon")).toBeInTheDocument();
+    expect(screen.getByTitle("minus icon")).toHaveAttribute(
+      "data-file-name",
+      "SvgMinus"
+    );
   });
 
   it("closes the accordion when the button is in focus and the 'esc' key is pressed", async () => {