pr05 Typescript #4: migrate instance of react file

.eslintrc

@@ -29,6 +29,7 @@
         "tsx": "never"
       }
     ],
+    "react/jsx-filename-extension": [1, { "extensions": [".jsx", ".tsx"] }],
     "comma-dangle": 0,  // not sure why airbnb turned this on. gross!
     "default-param-last": 0,
     "no-else-return" :0,
@@ -126,7 +127,12 @@
     {
       "files": ["*.ts", "*.tsx"],
       "parser": "@typescript-eslint/parser",
-      "plugins": ["@typescript-eslint"]
+      "plugins": ["@typescript-eslint"],
+      "rules": {
+        "no-use-before-define": "off",
+        "import/no-extraneous-dependencies": "off",
+        "no-unused-vars": "off"
+      }
     },
     {
       "files": ["*.stories.@(js|jsx|ts|tsx)"],

client/components/SkipLink.test.tsx

@@ -0,0 +1,40 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import '@testing-library/jest-dom';
+import SkipLink from './SkipLink';
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key
+  })
+}));
+
+describe('SkipLink', () => {
+  const defaultProps = {
+    targetId: 'main-content',
+    text: 'goToMain'
+  };
+
+  test('renders with correct href and text', () => {
+    render(<SkipLink {...defaultProps} />);
+    const link = screen.getByRole('link');
+
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', '#main-content');
+    expect(link).toHaveTextContent('SkipLink.goToMain');
+  });
+
+  test('adds "focus" class on focus and removes it on blur', () => {
+    render(<SkipLink {...defaultProps} />);
+    const link = screen.getByRole('link');
+
+    expect(link.className).toBe('skip_link');
+
+    fireEvent.focus(link);
+    expect(link.className).toContain('focus');
+
+    fireEvent.blur(link);
+    expect(link.className).toBe('skip_link');
+  });
+});

client/components/SkipLink.jsx → client/components/SkipLink.tsx

@@ -1,9 +1,13 @@
 import React, { useState } from 'react';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 
-const SkipLink = ({ targetId, text }) => {
+type SkipLinkProps = {
+  targetId: string,
+  text: string
+};
+
+const SkipLink = ({ targetId, text }: SkipLinkProps) => {
   const [focus, setFocus] = useState(false);
   const { t } = useTranslation();
   const handleFocus = () => {
@@ -27,9 +31,4 @@ const SkipLink = ({ targetId, text }) => {
   );
 };
 
-SkipLink.propTypes = {
-  targetId: PropTypes.string.isRequired,
-  text: PropTypes.string.isRequired
-};
-
 export default SkipLink;