Redux Toolkit Query

[jg210]

Change from using fetch() in useEffect() for connecting to the API to using RTK Query.

The PR also changes from mocking the API via the app's FSA.tsx class to using Mock Service Worker library to mock it below RTK Query. I wasn't able to easily make MSW work with jest, so I replaced jest with vitest in #40.

RTK Query caches API results, so need to show time data was retrieved in the UI to comply with https://www.food.gov.uk/terms-and-conditions.

The API is now polled and the UI updated automatically.

[jg210]

Need to fix App.test.jsx.

• https://redux.js.org/usage/writing-tests
• https://mswjs.io/
• https://stackoverflow.com/a/72493058

[jg210]

Cannot find module 'msw/node' from 'src/__tests__/App.test.tsx'

...which is mswjs/msw#1786, with some controversy in its comments...

[jg210]

  testEnvironmentOptions: {
    // https://github.com/mswjs/msw/issues/1786
    customExportConditions: [''],
  }

...is the controversial fix.

[jg210]

Now failing due to mswjs/msw#1796:

    ReferenceError: TextEncoder is not defined

      3 | import { App } from '../App';
      4 | import { Establishments, LocalAuthority, fetchEstablishmentsJson } from '../FSA';
    > 5 | import { setupServer } from 'msw/node';
        | ^
      6 | import { http, HttpResponse } from 'msw';
      7 |
      8 | function checkBoilerplate() {

      at Object.<anonymous> (node_modules/@mswjs/interceptors/src/utils/bufferUtils.ts:1:17)
      at Object.<anonymous> (node_modules/@mswjs/interceptors/lib/node/index.js:7:24)
      at Object.<anonymous> (node_modules/msw/src/node/SetupServerApi.ts:6:8)
      at Object.require (src/__tests__/App.test.tsx:5:1)

Didn't find a solution that worked in comments (e.g. https://mswjs.io/docs/migrations/1.x-to-2.x#requestresponsetextencoder-is-not-defined-jest).

mswjs/msw#2015 is newer issue for same error message.

I didn't see or try https://mswjs.io/docs/runbook#fixing-environment before moving to vitest:

// jest.config.js
module.exports = {
  globals: {
    fetch,
    Headers,
    Request,
    Response,
    FormData,
    Blob,
  },
}

[jg210]

The above merge from master brought change from jest to vitest. A lot more things work now.

[jg210]

App.test.tsx is failing with Table still in loading... state:

 FAIL  src/__tests__/App.test.tsx > App > shows rating if click on establishment
TestingLibraryElementError: Unable to find role="table"

The MSW event logging is:

request:start: 177db367-45b1-4fa4-8b6e-7d37f8b954b3 GET http://example.com/api/fsa/localAuthority
request:match: 177db367-45b1-4fa4-8b6e-7d37f8b954b3 GET http://example.com/api/fsa/localAuthority
response:mocked: GET http://example.com/api/fsa/localAuthority 200 OK

request:start: 50c706c4-c2f1-4b3c-8927-6e24351c175f GET http://example.com/api/fsa/localAuthority
request:match: 50c706c4-c2f1-4b3c-8927-6e24351c175f GET http://example.com/api/fsa/localAuthority
response:mocked: GET http://example.com/api/fsa/localAuthority 200 OK

request:start: 5a555f1b-a73d-446d-bc4d-770a7f5672af GET http://example.com/api/fsa/localAuthority/243433

The MSW handler seems correctly configured, since get error if add a typo to the http://example.com/api/fsa/localAuthority/:localAuthorityId URL:

[MSW] Error: intercepted a request without a matching request handler:

  • GET http://example.com/api/fsa/localAuthority/243433

...so it looks like test stops running before MSW can provide a response?

Update: problem fixed by 25721c5