tests: adds aXe test for <Officers />; resolves key bug (#507)

* tests: adds aXe test for `<Officers />`; resolves `key` bug

* lint fixes and remove next image req. in eslint

---------

Co-authored-by: Alex Zheng <[email protected]>
Co-authored-by: smalex-z <[email protected]>

Author: mattxwang

.eslintrc.js

@@ -31,6 +31,7 @@ module.exports = {
     'react/prop-types': 'off',
     'react/no-unknown-property': 'off',
     'react/react-in-jsx-scope': 'off',
+    '@next/next/no-img-element': 'off',
 
     // many of these rules are taken from our friends at Creative Labs;
     // see their config here: https://github.com/UCLA-Creative-Labs/sunshine/blob/master/.eslintrc.js

__tests__/components/LeadershipOfficers.test.js

@@ -0,0 +1,32 @@
+import { render } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import Officers from '../../components/LeadershipOfficers';
+import data from '../../data';
+
+expect.extend(toHaveNoViolations);
+
+// TODO: consider lifting this mock globally
+jest.mock('next/image', () => ({
+  __esModule: true,
+  default: (props) => {
+    // eslint-disable-next-line @next/next/no-img-element
+    return <img alt={props.alt} {...props} />;
+  },
+}));
+
+it('has no axe violations', async () => {
+  const { leadership } = data;
+
+  // 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(<Officers officers={leadership} />);
+    results = await axe(container);
+  });
+
+  expect(results).toHaveNoViolations();
+});

components/LeadershipOfficers.js

@@ -23,11 +23,13 @@ function Officer(props) {
 function Officers(props) {
   return (
     // TODO: more flexible mobile views
-    (<div className="grid-desktop-3">
-      {props.officers.map((officer) => (
-        <Officer officer={officer} key={officer.image} />
-      ))}
-    </div>)
+    <div className="grid-desktop-3">
+      {
+        props.officers.map(
+          officer => <Officer officer={officer} key={officer.name + officer.position} />,
+        )
+      }
+    </div>
   );
 }