Enable unit tests

[cypressf]

• [x] Add basic github action workflow on merge to main, or PR to main https://github.com/cypressf/climate-risk-map/pull/2
• [x] Add skeleton rust tests https://github.com/cypressf/climate-risk-map/pull/4
• [x] Add skeleton typescript tests https://github.com/cypressf/climate-risk-map/pull/3
• [x] Automatically prevent merging to main if tests fail? I turned on the setting for preventing PR merges until status checks have passed

[cypressf]

typescript tests

See changes here: https://github.com/cypressf/climate-risk-map/pull/2/commits/b01ae99350b7e97a91b90ccae038c553989e9a4e

I followed instructions

• first the official jest docs: https://jestjs.io/docs/tutorial-react and here: https://jestjs.io/docs/getting-started#using-typescript
• then this vite-specific one here: https://codingwithmanny.medium.com/quick-jest-setup-with-vitejs-react-typescript-82f325e4323f

But with both, I got this error in the current setup:

frontend (github-actions) yarn test
 FAIL  src/Footer.test.tsx
  ● Test suite failed to run

    Cannot find module 'http-proxy-agent'
    Require stack:
    - /Users/cypressf/repos/climate-risk-map/frontend/node_modules/jsdom/lib/jsdom/living/helpers/agent-factory.js
    - /Users/cypressf/repos/climate-risk-map/frontend/node_modules/jsdom/lib/jsdom/living/xhr/xhr-utils.js
    - /Users/cypressf/repos/climate-risk-map/frontend/node_modules/jsdom/lib/jsdom/living/xhr/XMLHttpRequest-impl.js
    - /Users/cypressf/repos/climate-risk-map/frontend/node_modules/jsdom/lib/jsdom/living/generated/XMLHttpRequest.js
    - /Users/cypressf/repos/climate-risk-map/frontend/node_modules/jsdom/lib/jsdom/living/interfaces.js
    - /Users/cypressf/repos/climate-risk-map/frontend/node_modules/jsdom/lib/jsdom/browser/Window.js
    - /Users/cypressf/repos/climate-risk-map/frontend/node_modules/jsdom/lib/api.js
    - /Users/cypressf/repos/climate-risk-map/frontend/node_modules/jest-environment-jsdom/build/index.js
    - /Users/cypressf/repos/climate-risk-map/frontend/node_modules/jest-util/build/requireOrImportModule.js
    - /Users/cypressf/repos/climate-risk-map/frontend/node_modules/jest-util/build/index.js
    - /Users/cypressf/repos/climate-risk-map/frontend/node_modules/jest-config/build/getCacheDirectory.js
    - /Users/cypressf/repos/climate-risk-map/frontend/node_modules/jest-config/build/Defaults.js
    - /Users/cypressf/repos/climate-risk-map/frontend/node_modules/jest-config/build/normalize.js
    - /Users/cypressf/repos/climate-risk-map/frontend/node_modules/jest-config/build/index.js
    - /Users/cypressf/repos/climate-risk-map/frontend/node_modules/jest-cli/build/init/index.js
    - /Users/cypressf/repos/climate-risk-map/frontend/node_modules/jest-cli/build/cli/index.js
    - /Users/cypressf/repos/climate-risk-map/frontend/node_modules/jest-cli/bin/jest.js
    - /Users/cypressf/repos/climate-risk-map/frontend/node_modules/jest/bin/jest.js

      at Function.Module._resolveFilename.sharedData.moduleResolveFilenameHook.installedValue [as _resolveFilename] (node_modules/@cspotcode/source-map-support/source-map-support.js:679:30)
      at Object.<anonymous> (node_modules/jsdom/lib/jsdom/living/helpers/agent-factory.js:5:24)
      at require.extensions.<computed> (node_modules/ts-node/src/index.ts:1361:43)
      at Object.require.extensions.<computed> [as .js] (node_modules/ts-node/src/index.ts:1361:43)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.243 s, estimated 5 s
Ran all test suites.

Next I'm going to try reproducing the error in a clean vite + react + typescript project.

[cypressf]

A fresh start with

yarn create vite test-vite --template react-ts
yarn add -D jest @types/jest ts-node ts-jest @testing-library/react @testing-library/user-event identity-obj-proxy

And then setting up the config files and test example as shown in the vite + react + jest + typescript tutorial worked for me. So why doesn't it work for the existing project, is the next question.

[cypressf]

I deleted node_modules and yarn.lock, and reran yarn install, and the jest test is now working in the frontend! It must've been an out-of-date package.

[cypressf]

I'm going to add an integration test to the frontend. Currently I'm having some trouble mocking the d3-fetch calls in Home that are fetching the topojson. I might mock the responses using msw

[cypressf]

I think fetch needs a polyfill when running tests too, because fetch is a browser-specific api and the tests run in node. https://github.com/mswjs/msw/issues/686 Even before the fetch calls get to the network stage, I get this error

    ReferenceError: fetch is not defined
      35 |
      36 |   useEffect(() => {
    > 37 |     json<TopoJson>(mapFile).then(topoJson => {
         |     ^
      38 |       dispatch(setMap(topoJson));
      39 |     });
      40 |

(note: json is the d3.json function that uses fetch internally)

See https://github.com/mswjs/msw/issues/686

[cypressf]

I added the whatwg-fetch polyfill, and it no longer complains about the missing fetch.

[cypressf]

The test is working for me locally, but failing with a timeout on the github runner https://github.com/cypressf/climate-risk-map/runs/4489008017?check_suite_focus=true

I'm not sure what's happening. it could be the github runner is just much slower than my laptop. I'm going to try again with a ridiculous 20s timeout.

[cypressf]

That timeout did the trick. Next: stub a backend test

[cypressf]

I'm reading about testing in rust in the rust book and the rust-by-example guide

[cypressf]

Okay, I added a basic rust unit test, and enabled cargo test in the github workflow. We're on our way to continuous integration! Next I need to flesh out the tests, and figure out a way to copy the build output of the main branch to our server and redeploy.