[Bug] Warning during Jest Tests

[sethvanb]

Expected Behavior

No warnings when jest test are run.

Current Behavior

The tests all pass but some of them still raise the warning below. The error comes from the UseEffects call.

console.error
    Warning: An update to CoursesIndex inside a test was not wrapped in act(...).

    When testing, code that causes React state updates should be wrapped into act(...):

    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */

    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act
        in CoursesIndex
        in Router (created by MemoryRouter)
        in MemoryRouter
        in QueryClientProvider

      87 |      const getCourses = async () => {
      88 |              axios.get(coursesRoute).then(response => {
    > 89 |                      setCourses(response.data);
         |                      ^
      90 |              });
      91 |      }
      92 |

      at printWarning (node_modules/react-dom/cjs/react-dom.development.js:88:30)
      at error (node_modules/react-dom/cjs/react-dom.development.js:60:5)
      at warnIfNotCurrentlyActingUpdatesInDEV (node_modules/react-dom/cjs/react-dom.development.js:23284:7)
      at setCourses (node_modules/react-dom/cjs/react-dom.development.js:15656:9)
      at app/javascript/components/Courses/CoursesIndex.jsx:89:4

They should also consider invalidating the the api/courses so that list would be automatically fetched. Then we can refactor the functions and columns out of the default function in CoursesIndex.jsx.

Steps to Reproduce

1. run yarn test:jest

Possible Solution

The error comes from the UseEffects call. A possible solution to this warning would be to use useQuery to make api requests.