fix: fix alias bug and jest bug

src/App.test.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 
 import App from './App';
 
-test('renders learn react link', () => {
+test('renders made by link', () => {
   render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
+  const linkElement = screen.getByText(/Dreamerryao/i);
   expect(linkElement).toBeInTheDocument();
 });

src/App.tsx

@@ -1,8 +1,14 @@
 import '@/App.css';
 
+import Button from '@/components/Button';
+
 import logo from '@/logo.svg';
 
+const HOMEPAGE_URL = 'https://github.com/toy-playground/craco-ts-template';
 function App() {
+  const linkToHome = () => {
+    window.open(HOMEPAGE_URL);
+  };
   return (
     <div className='App'>
       <header className='App-header'>
@@ -22,6 +28,9 @@ function App() {
         <p>
           Edit <code>src/App.tsx</code> and save to reload.
         </p>
+        <Button onClick={linkToHome}>
+          And this is a button link to github.
+        </Button>
       </header>
     </div>
   );

src/components/Button.tsx

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+
+interface ButtonProps {
+  children: ReactNode;
+  onClick?: () => void;
+}
+
+const Button = ({ children, onClick }: ButtonProps) => {
+  return <button onClick={onClick}>{children}</button>;
+};
+
+export default Button;

tsconfig.json

@@ -14,8 +14,10 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
-  "include": ["src"],
-  "extends": "./tsconfig.paths.json"
+  "include": ["src"]
 }