fix: jest config & screen usage (gitify-app#977)

Author: afonsojramos

jest.config.js renamed to jest.config.ts

@@ -1,5 +1,7 @@
-const config = {
-  preset: 'ts-jest/presets/js-with-ts',
+import type { Config } from 'jest';
+
+const config: Config = {
+  preset: 'ts-jest',
   setupFiles: ['<rootDir>/src/__helpers__/setupEnvVars.js'],
   testEnvironment: 'jsdom',
   collectCoverage: true,
@@ -13,6 +15,7 @@ const config = {
     // via https://github.com/axios/axios/issues/5101#issuecomment-1276572468
     '^axios$': require.resolve('axios'),
   },
+  modulePathIgnorePatterns: ['<rootDir>/build', '<rootDir>/node_modules'],
 };
 
 module.exports = config;

package.json

@@ -149,6 +149,7 @@
     "style-loader": "3.3.4",
     "tailwindcss": "3.4.3",
     "ts-jest": "29.1.2",
+    "ts-node": "^10.9.2",
     "webpack": "5.91.0",
     "webpack-cli": "5.1.4",
     "webpack-merge": "5.10.0"

pnpm-lock.yaml

@@ -1,4 +1,4 @@
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 
 import * as TestRenderer from 'react-test-renderer';
 
@@ -19,9 +19,9 @@ describe('components/Logo.tsx', () => {
 
   it('should click on the logo', () => {
     const onClick = jest.fn();
-    const { getByRole } = render(<Logo onClick={onClick} />);
+    render(<Logo onClick={onClick} />);
 
-    fireEvent.click(getByRole('logo'));
+    fireEvent.click(screen.getByLabelText('Gitify Logo'));
 
     expect(onClick).toHaveBeenCalledTimes(1);
   });

src/components/Logo.test.tsx

@@ -17,7 +17,8 @@ export const Logo = ({ isDark, onClick, className = '', ...props }: IProps) => (
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 500 500"
-    role="logo"
+    role="img"
+    aria-label="Gitify Logo"
     {...props}
   >
     <defs>