Convert test files to TS (#78)

* Install Jest TS Requirements

* index.test.ts working

* Convert all tests to typescript

* Implemented legrandgrand changes

* Install Jest TS Requirements

* index.test.ts working

* Convert all tests to typescript

* Implemented legrandgrand changes

* Update package.json with main

.babelrc

@@ -9,7 +9,8 @@
               "node": "current"
             }
           }
-        ]
+        ],
+        "@babel/preset-typescript"
       ]
     }
   }

components/ProfileHeader/ProfileHeader.test.js → components/ProfileHeader/ProfileHeader.test.ts

@@ -1,5 +1,5 @@
 import { stubbedRender } from '@/testUtils';
-import ProfileHeader from './ProfileHeader';
+import ProfileHeader from './ProfileHeader.vue';
 
 describe('<ProfileHeader />', () => {
   it('should render without crashing', () => {

components/ProfileHeader/UserActivity/UserActivity.test.js → components/ProfileHeader/UserActivity/UserActivity.test.ts

@@ -1,5 +1,5 @@
 import { stubbedRender } from '@/testUtils';
-import UserActivity from './UserActivity';
+import UserActivity from './UserActivity.vue';
 
 describe('<UserActivity />', () => {
   it('should render without crashing', () => {

components/SiteFooter/SiteFooter.test.js → components/SiteFooter/SiteFooter.test.ts

@@ -1,5 +1,5 @@
 import { stubbedRender } from '@/testUtils';
-import SiteFooter from './SiteFooter';
+import SiteFooter from './SiteFooter.vue';
 
 describe('<SiteFooter />', () => {
   it('should render without crashing', () => {

components/SiteNavbar/SiteNavbar.test.js → components/SiteNavbar/SiteNavbar.test.ts

@@ -1,5 +1,5 @@
 import { stubbedRender } from '@/testUtils';
-import SiteNavbar from './SiteNavbar';
+import SiteNavbar from './SiteNavbar.vue';
 
 /* Need to mock the `window.matchMedia` method here, because it has not
  * yet been implemented by JSDOM. Hopefully this will be fixed soon.

components/base/ButtonLink/ButtonLink.test.js → components/base/ButtonLink/ButtonLink.test.ts

@@ -1,5 +1,5 @@
 import { stubbedRender } from '@/testUtils';
-import ButtonLink from './ButtonLink';
+import ButtonLink from './ButtonLink.vue';
 
 describe('<ButtonLink />', () => {
   const defaultAttrs = { class: 'custom-link' };

components/core/FollowButton/FollowButton.test.js → components/core/FollowButton/FollowButton.test.ts

@@ -1,5 +1,5 @@
 import { fireEvent, stubbedRender } from '@/testUtils';
-import FollowButton from './FollowButton';
+import FollowButton from './FollowButton.vue';
 
 describe('<FollowButton />', () => {
   /*
@@ -32,7 +32,7 @@ describe('<FollowButton />', () => {
       it('should call the default onSubmit methd', async () => {
         const { container } = stubbedRender(FollowButton);
 
-        await fireEvent.click(container.firstChild);
+        fireEvent.click(<HTMLElement>container.firstChild);
 
         expect(spyConsoleLog).toHaveBeenCalled();
       });
@@ -43,7 +43,7 @@ describe('<FollowButton />', () => {
         props: defaultProps,
       });
 
-      await fireEvent.click(container.firstChild);
+      fireEvent.click(<HTMLElement>container.firstChild);
 
       expect(mockOnClick).toHaveBeenCalled();
     });
@@ -53,7 +53,7 @@ describe('<FollowButton />', () => {
         props: defaultProps,
       });
 
-      await fireEvent.type(container.firstChild, '{enter}');
+      fireEvent.type(<HTMLElement>container.firstChild, '{enter}');
 
       expect(mockOnClick).toHaveBeenCalled();
     });

components/core/LoginButton/LoginButton.test.js → components/core/LoginButton/LoginButton.test.ts

@@ -1,5 +1,5 @@
 import { stubbedRender } from '@/testUtils';
-import LoginButton from './LoginButton';
+import LoginButton from './LoginButton.vue';
 
 describe('<LoginButton />', () => {
   it('should render without crashing', () => {

components/core/NavLinks/NavLink/NavLink.test.js → components/core/NavLinks/NavLink/NavLink.test.ts

@@ -1,5 +1,5 @@
 import { stubbedRender } from '@/testUtils';
-import NavLink from './NavLink';
+import NavLink from './NavLink.vue';
 
 describe('<NavLink />', () => {
   const defaultAttrs = { class: 'custom-link' };

components/core/NavLinks/NavLinks.test.js → components/core/NavLinks/NavLinks.test.ts

@@ -1,5 +1,5 @@
 import { stubbedRender } from '@/testUtils';
-import NavLinks from './NavLinks';
+import NavLinks from './NavLinks.vue';
 
 describe('<NavLinks />', () => {
   const defaultProps = {
@@ -31,7 +31,7 @@ describe('<NavLinks />', () => {
       props: defaultProps,
     });
 
-    expect(container.firstChild.childNodes.length).toEqual(
+    expect(container.firstChild?.childNodes.length).toEqual(
       defaultProps.navLinks.length,
     );
     defaultProps.navLinks.forEach((navLink) => {

components/core/SearchBar/SearchBar.test.js → components/core/SearchBar/SearchBar.test.ts

@@ -1,5 +1,5 @@
 import { fireEvent, stubbedRender } from '@/testUtils';
-import SearchBar from './SearchBar';
+import SearchBar from './SearchBar.vue';
 
 describe('<SearchBar />', () => {
   const mockOnSubmit = jest.fn();

components/core/SignUpButton/SignUpButton.test.js → components/core/SignUpButton/SignUpButton.test.ts

@@ -1,5 +1,5 @@
 import { stubbedRender } from '@/testUtils';
-import SignUpButton from './SignUpButton';
+import SignUpButton from './SignUpButton.vue';
 
 describe('<SignUpButton />', () => {
   it('should render without crashing', () => {

components/core/SocialButtons/SocialButtons.test.js → components/core/SocialButtons/SocialButtons.test.ts

@@ -1,5 +1,5 @@
 import { stubbedRender } from '@/testUtils';
-import SocialButtons from './SocialButtons';
+import SocialButtons from './SocialButtons.vue';
 
 describe('<SocialButtons />', () => {
   const defaultProps = {
@@ -43,7 +43,7 @@ describe('<SocialButtons />', () => {
       props: defaultProps,
     });
 
-    expect(container.firstChild.childNodes.length).toEqual(
+    expect(container.firstChild?.childNodes.length).toEqual(
       defaultProps.socials.length,
     );
     defaultProps.socials.forEach((social) => {

components/core/UserBadges/UserBadges.test.js → components/core/UserBadges/UserBadges.test.ts

@@ -1,5 +1,5 @@
 import { stubbedRender } from '@/testUtils';
-import UserBadges from './UserBadges';
+import UserBadges from './UserBadges.vue';
 
 describe('<ProfileHeader />', () => {
   it('should render without crashing', () => {

jest.config.js

@@ -19,6 +19,7 @@ module.exports = {
     '^vue$': 'vue/dist/vue.common.js',
     '^~/(.*)$': '<rootDir>/$1',
   },
+  preset: 'ts-jest',
   setupFilesAfterEnv: ['./jest.setup.js'],
   snapshotSerializers: ['jest-serializer-vue'],
   testEnvironment: 'jsdom',