Setup tests

.husky/pre-commit

@@ -2,3 +2,5 @@
 . "$(dirname "$0")/_/husky.sh"
 
 yarn lint
+
+yarn test

jest.config.js

@@ -0,0 +1,32 @@
+module.exports = {
+  collectCoverageFrom: [
+    '**/*.{js,jsx,ts,tsx}',
+    '!**/*.d.ts',
+    '!**/node_modules/**',
+    '!<rootDir>/out/**',
+    '!<rootDir>/.next/**',
+    '!<rootDir>/*.config.js',
+    '!<rootDir>/coverage/**',
+  ],
+  moduleNameMapper: {
+    // Handle CSS imports (with CSS modules)
+    // https://jestjs.io/docs/webpack#mocking-css-modules
+    // '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
+
+    // Handle CSS imports (without CSS modules)
+    // '^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',
+
+    // Handle image imports
+    // https://jestjs.io/docs/webpack#handling-static-assets
+    // '^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i': `<rootDir>/__mocks__/fileMock.js`,
+
+    // Handle module aliases
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
+  transform: {
+    // Use babel-jest to transpile tests with the next/babel preset
+    // https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
+    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
+  },
+  testEnvironment: 'jsdom',
+};

package.json

@@ -62,7 +62,8 @@
     "build": "next build",
     "start": "next start",
     "lint": "tsc && next lint ",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "test": "jest"
   },
   "browserslist": {
     "production": [
@@ -93,6 +94,7 @@
     "@types/styled-components": "^5.1.14",
     "@types/swagger-ui-react": "3.35.0",
     "@types/websocket": "1.0.2",
+    "babel-jest": "^28.1.2",
     "babel-plugin-inline-react-svg": "^2.0.1",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-styled-components": "^1.13.2",
@@ -102,6 +104,8 @@
     "file-loader": "^6.2.0",
     "frontmatter-markdown-loader": "^3.6.2",
     "husky": "6.0.0",
+    "jest": "^28.1.2",
+    "jest-environment-jsdom": "^28.1.2",
     "prettier": "^2.2.1",
     "raw-loader": "^4.0.2",
     "sass": "^1.32.8",

src/components/AnnouncementBar/index.tsx

@@ -77,7 +77,11 @@ const AnnouncementBar = ({
     <StyledAnnouncementBar className={className} variant={variant}>
       <StyledContent>
         {removable && (
-          <Close onClick={() => setClosed(true)}>
+          <Close
+            onClick={() => setClosed(true)}
+            role="button"
+            aria-label="Close"
+          >
             <FaTimes />
           </Close>
         )}

src/pages/MinerDashboard/Announcements/FlexFarmerAnnouncement/FlexFarmerAnnouncement.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import FlexFarmerAnnouncement from './FlexFarmerAnnouncement';
+import { render, screen, waitFor } from '@/utils/test-utils';
+import '@testing-library/jest-dom';
+
+describe('<FlexFarmerAnnouncement />', () => {
+  it('should render correctly', () => {
+    render(<FlexFarmerAnnouncement />);
+    expect(
+      screen.getByRole('link', { name: /learn more about flexfarmer/i })
+    ).toBeInTheDocument();
+  });
+
+  it('should disappear when x is clicked', async () => {
+    render(<FlexFarmerAnnouncement />);
+
+    expect(
+      screen.getByRole('link', { name: /learn more about flexfarmer/i })
+    ).toBeVisible();
+
+    screen.getByRole('button', { name: /close/i }).click();
+
+    await waitFor(() => {
+      expect(
+        screen.queryByRole('link', { name: /learn more about flexfarmer/i })
+      ).not.toBeInTheDocument();
+    });
+  });
+});

src/utils/test-utils.tsx

@@ -0,0 +1,19 @@
+import { render, RenderOptions } from '@testing-library/react';
+import React from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+
+const AlltheProviders = ({ children }: { children?: React.ReactNode }) => {
+  const queryClient = new QueryClient();
+
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+};
+
+const customRender = (ui: React.ReactElement, options?: RenderOptions) => {
+  return render(ui, { wrapper: AlltheProviders, ...options });
+};
+
+export * from '@testing-library/react';
+
+export { customRender as render };