fix: jest config & screen usage (#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>