Merge pull request #4617 from luke-h1/dev

merge dev into main

next.config.js

@@ -70,6 +70,8 @@ const nextConfig = {
     // Force SWC transform on build to stop Next.js trying to use babel
     // since babel is only needed to support vanilla-extract in unit tests
     forceSwcTransforms: true,
+
+    serverComponentsHmrCache: true,
   },
   images: {
     minimumCacheTTL: 120,

src/components/SkillItem/index.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import toCamelCase from '@frontend/utils/toCamelCase';
 import { useTheme } from 'next-themes';
 import { useEffect } from 'react';
 import type { IconType } from 'react-icons';
@@ -24,7 +25,7 @@ const SkillItem = ({ icon, text }: SkillItemProps) => {
 
   return (
     <li>
-      <span className={styles.bg} data-testid={`${text}-icon`}>
+      <span className={styles.bg} data-testid={`${toCamelCase(text)}-icon`}>
         {icon({
           size: 30,
           className: styles.skillIcon,

src/components/Skills/Skills.test.tsx

@@ -1,4 +1,5 @@
 import render from '@frontend/test/render';
+import toCamelCase from '@frontend/utils/toCamelCase';
 import { screen } from '@testing-library/react';
 import Skills, { skills } from '.';
 
@@ -7,7 +8,9 @@ describe('Skills', () => {
     const { container } = render(<Skills />);
     skills.forEach(skill => {
       expect(screen.getByText(skill.text)).toBeInTheDocument();
-      expect(screen.getByTestId(`${skill.text}-icon`)).toBeInTheDocument();
+      expect(
+        screen.getByTestId(`${toCamelCase(skill.text)}-icon`),
+      ).toBeInTheDocument();
       expect(container).toMatchSnapshot();
     });
   });