Internationalization with App Router (v1)

__tests__/unit/button.unit.test.js

@@ -3,25 +3,23 @@ import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import Button from '../../src/components/Button';
 
-describe('Button', () => {
-  const text = 'Cool button text';
-  const mockCallback = jest.fn();
+const text = 'Cool button text';
+const mockCallback = jest.fn();
 
-  beforeEach(() => {
-    render(<Button text={text} onClick={mockCallback} />);
-  });
+it('should render the button with correct text', () => {
+  const { getByRole } = render(<Button text={text} onClick={mockCallback} />);
+  const button = getByRole('button', { name: text });
 
-  it('should render the button, with correct text', () => {
-    const button = screen.getByRole('button', { name: text });
-
-    expect(button).toBeInTheDocument();
-  });
+  expect(button).toBeVisible();
+  expect(button).toHaveTextContent(text);
+});
 
-  it('should execute the callback on user click', async () => {
-    const button = screen.getByRole('button', { name: text });
+it('should execute the callback on user click', async () => {
+  const { getByRole } = render(<Button text={text} onClick={mockCallback} />);
+  const button = getByRole('button', { name: text });
 
-    await userEvent.click(button);
+  await userEvent.click(button);
 
-    expect(mockCallback).toHaveBeenCalled();
-  });
+  expect(mockCallback).toHaveBeenCalled();
+  expect(mockCallback).toHaveBeenCalledTimes(1);
 });

__tests__/unit/card.unit.test.js

@@ -1,36 +1,49 @@
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import Card from '../../src/components/Card';
 
-describe('Card', () => {
+function setup() {
   const title = 'Regular card';
   const href = '/card-href';
   const linkText = 'Cool link text';
   const tags = ['First tag', 'Second tag'];
 
-  beforeEach(() => {
-    render(<Card title={title} href={href} linkText={linkText} tags={tags} />);
-  });
+  const utils = render(
+    <Card title={title} href={href} linkText={linkText} tags={tags} />,
+  );
 
-  it('renders the card title', () => {
-    const renderedTitle = screen.getByRole('heading');
-    expect(renderedTitle).toBeInTheDocument();
-    expect(renderedTitle).toHaveTextContent(title);
-  });
+  return {
+    ...utils,
+    title,
+    href,
+    linkText,
+    tags,
+  };
+}
 
-  it('renders the card link', () => {
-    const renderedLink = screen.getByRole('link');
-    expect(renderedLink).toBeInTheDocument();
-    expect(renderedLink).toHaveTextContent(linkText);
-    expect(renderedLink).toHaveAttribute('href', href);
-  });
+it('should render the card title with correct text', () => {
+  const { getByRole, title } = setup();
+  const renderedTitle = getByRole('heading');
+
+  expect(renderedTitle).toBeVisible();
+  expect(renderedTitle).toHaveTextContent(title);
+});
+
+it('should render the card link with correct text and href', () => {
+  const { getByRole, linkText, href } = setup();
+  const renderedLink = getByRole('link');
+
+  expect(renderedLink).toBeVisible();
+  expect(renderedLink).toHaveTextContent(linkText);
+  expect(renderedLink).toHaveAttribute('href', href);
+});
 
-  it('renders all card tags', () => {
-    const renderedTags = screen.getAllByTestId('tag');
-    expect(renderedTags).toHaveLength(tags.length);
+it('should render all card tags with correct texts', () => {
+  const { getAllByTestId, tags } = setup();
+  const renderedTags = getAllByTestId('tag');
 
-    renderedTags.forEach((tag, index) => {
-      expect(tag).toHaveTextContent(tags[index]);
-    });
+  expect(renderedTags).toHaveLength(tags.length);
+  renderedTags.forEach((tag, index) => {
+    expect(tag).toHaveTextContent(tags[index]);
   });
 });

__tests__/unit/header.unit.test.js

@@ -2,11 +2,11 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import Brand from '../../src/components/layout/header/Brand';
 
-describe('Header', () => {
-  it('redirects the logo to the homepage', async () => {
-    render(<Brand />);
+it('should render the logo with a link to the homepage', async () => {
+  render(<Brand lang="en" />);
+  const logoLink = screen.getByLabelText('Go to the homepage');
 
-    const logoLink = screen.getByRole('link');
-    expect(logoLink).toHaveAttribute('href', '/');
-  });
+  expect(logoLink).toBeVisible();
+  expect(logoLink).toHaveTextContent('[ RC ]');
+  expect(logoLink).toHaveAttribute('href', '/en');
 });

__tests__/unit/home.unit.test.js

@@ -1,27 +1,21 @@
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import About from '../../src/app/[lang]/components/About';
 import FeaturedProjects from '../../src/app/[lang]/components/FeaturedProjects';
 
-describe('About me block', () => {
-  beforeEach(() => {
-    render(<About />);
-  });
+it('should redirect the "more about me" button to the about page', async () => {
+  const { findByRole } = render(await About({ lang: 'en' }));
 
-  test('read more redirects to the about page', () => {
-    const anchor = screen.getByText('More about me');
-    expect(anchor).toHaveAttribute('href', '/about');
-  });
+  const anchor = await findByRole('link', { name: 'More about me' });
+  expect(anchor).toBeVisible();
+  expect(anchor).toHaveAttribute('href', '/en/about');
 });
 
-describe('Featured projects block', () => {
-  beforeEach(() => {
-    render(<FeaturedProjects />);
-  });
+it('should redirect the "see all projects" button to the projects page', async () => {
+  const { findByRole } = render(await FeaturedProjects({ lang: 'en' }));
 
-  test('see all projects redirects to the projects page', () => {
-    const anchor = screen.getByText('See all projects');
+  const anchor = await findByRole('link', { name: 'See all projects' });
 
-    expect(anchor).toHaveAttribute('href', '/projects');
-  });
+  expect(anchor).toBeVisible();
+  expect(anchor).toHaveAttribute('href', '/en/projects');
 });

__tests__/unit/tag.unit.test.js

@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Tag from '../../src/components/Tag';
+
+it('should render the tag with correct text', () => {
+  const tagLabel = 'Tag label';
+  const { getByTestId } = render(<Tag label={tagLabel} />);
+  const tag = getByTestId('tag');
+
+  expect(tag).toBeVisible();
+  expect(tag).toHaveTextContent(tagLabel);
+});