diff --git a/next.config.js b/next.config.js index 1f38a8ec8..44bb347b6 100644 --- a/next.config.js +++ b/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, diff --git a/src/components/SkillItem/index.tsx b/src/components/SkillItem/index.tsx index 6a4fc3f9b..82b88eb9b 100644 --- a/src/components/SkillItem/index.tsx +++ b/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 (
  • - + {icon({ size: 30, className: styles.skillIcon, diff --git a/src/components/Skills/Skills.test.tsx b/src/components/Skills/Skills.test.tsx index ce8a1de50..961fa35da 100644 --- a/src/components/Skills/Skills.test.tsx +++ b/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.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(); }); }); diff --git a/src/components/Skills/__snapshots__/Skills.test.tsx.snap b/src/components/Skills/__snapshots__/Skills.test.tsx.snap index 32dc45bf1..c5c04b9a6 100644 --- a/src/components/Skills/__snapshots__/Skills.test.tsx.snap +++ b/src/components/Skills/__snapshots__/Skills.test.tsx.snap @@ -107,7 +107,7 @@ exports[`Skills renders correctly 1`] = `
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • { - test('should convert a string to camel case', () => { + test('converts string to camel-case', () => { const str = 'Hello World'; const result = toCamelCase(str); - expect(result).toBe('HelloWorld'); + expect(result).toEqual('HelloWorld'); }); - test('should convert a string to camel case', () => { - const str = 'Hello World'; - const result = toCamelCase(str); - expect(result).toBe('HelloWorld'); - }); - - test('should convert a string to camel case', () => { - const str = 'Hello World'; + test('multiple gaps get converted to camel-case', () => { + const str = 'AWS Azure Vercel'; const result = toCamelCase(str); - expect(result).toBe('HelloWorld'); + expect(result).toEqual('AWSAzureVercel'); }); });