test: adds aXe test for <SocialMedia /> (#508)

Unsure if this actually does anything (how does jest interact) with
Font Awesome? Worth investigating.

Author: mattxwang

__tests__/components/SocialMedia.test.js

@@ -0,0 +1,35 @@
+import { render } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import SocialMedia from '../../components/SocialMedia';
+
+expect.extend(toHaveNoViolations);
+
+describe('SocialMedia, dark text (default)', () => {
+  it('has no axe violations', async () => {
+    // this let / async construct is required since next/image rendering
+    // is a side effect that needs to be captured with async act
+    // see https://reactjs.org/docs/test-utils.html#act
+    let results;
+    await act(async () => {
+      const { container } = render(<SocialMedia />);
+      results = await axe(container);
+    });
+    expect(results).toHaveNoViolations();
+  });
+});
+
+describe('SocialMedia, light text', () => {
+  it('has no axe violations', async () => {
+    // this let / async construct is required since next/image rendering
+    // is a side effect that needs to be captured with async act
+    // see https://reactjs.org/docs/test-utils.html#act
+    let results;
+    await act(async () => {
+      const { container } = render(<SocialMedia type="light" />);
+      results = await axe(container);
+    });
+    expect(results).toHaveNoViolations();
+  });
+});