Skip to content

Conversation

@Willdotwhite
Copy link

Why

The previous iteration of this project used create-react-app and react-scripts, which anchored the dependencies of this project to now-deprecated packages that are hard to update. Instead of incrementally improving packages where possible, this change has effectively rebased this project onto a modern ReactJS stack to give us more headroom in staying secure until dependencies reach EOL.

Ethos

Change as little of the source/test files as possible; therefore, most of the changes are JS setup/config files that I would expect a candidate to ignore.

This approach has led to more dependencies, but for the most part the tooling is using them with default behaviour, so hopefully maintaining them will not be too painful 🤞🏻

How

  • Run npm create vite@latest . -- --template react in place
  • Migrate React source files from .js to .jsx
  • Remove react-scripts tooling (e.g. setupTests.js) and move logic into the test files

Outcome

Before

$ npm audit
38 vulnerabilities (6 low, 14 moderate, 17 high, 1 critical)

After

$ npm audit
found 0 vulnerabilities

Tests

All tests pass but one, which I believe intentionally fails (as there's no logic to refetch the data in the UI)

Verbose test output ``` $ npm test -- --verbose

elections-ui@0.2.0 test
jest --verbose

FAIL src/components/Scoreboard.test.jsx
✓ renders Results (67 ms)
✓ renders error state (9 ms)
✕ fetches results again when refresh button clicked (18 ms)

● fetches results again when refresh button clicked

expect(jest.fn()).toHaveBeenCalledTimes(expected)

Expected number of calls: 2
Received number of calls: 1

  87 |   fireEvent.click(refreshButton);
  88 |
> 89 |   expect(dataFetcher).toHaveBeenCalledTimes(2);
     |                       ^
  90 |   await waitFor(() => {
  91 |     const votesAfterRefresh = screen.getByText(/12345/i);
  92 |     expect(votesAfterRefresh).toBeInTheDocument();

  at toHaveBeenCalledTimes (src/components/Scoreboard.test.jsx:89:23)
  at Generator.call (src/components/Scoreboard.test.jsx:2:1)
  at Generator._invoke [as next] (src/components/Scoreboard.test.jsx:2:1)
  at asyncGeneratorStep (src/components/Scoreboard.test.jsx:2:1)
  at asyncGeneratorStep (src/components/Scoreboard.test.jsx:2:1)

PASS src/components/Scorecard/Scorecard.test.jsx
✓ renders results (4 ms)
✓ renders No Results if there are no results (1 ms)

PASS src/components/PartyLinks/PartyLinks.test.jsx
✓ renders party links as a list (3 ms)
✓ renders all the party links (2 ms)
✓ renders a party link with the correct text and href (2 ms)

PASS src/dataFetcher/index.test.jsx
✓ returns an Object (1 ms)
✓ response contains a result array

Test Suites: 1 failed, 3 passed, 4 total
Tests: 1 failed, 9 passed, 10 total
Snapshots: 0 total
Time: 0.889 s, estimated 1 s
Ran all test suites.

</details>

Why:
The previous iteration of this project used create-react-app and react-scripts,
which anchored the dependencies of this project to now-deprecated packages that
are hard to update. Instead of incrementally improving packages where possible,
this change has effectively rebased this project onto a modern ReactJS stack
to give us more headroom in staying secure until dependencies reach EOL.

How:
* Run `npm create vite@latest . -- --template react` in place
* Migrate React source files from `.js` to `.jsx`
* Remove react-scripts tooling (e.g. setupTests.js) and move logic into the test files
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants