Say in TESTING.md how to unit-test component logic (import it, don't read the source)

Open Beginner friendly
  • Is something wrong?
#422 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
1/5
Estimated time
Under an hour
Newbie friendliness
72/100
Issue type
Documentation
Clarity
Clearly specified
Activity status
Active
Tech stack
javascript, markdown, react
Domain
documentation, testing

Research direction

Start with TESTING.md and add a short section on unit-testing component logic: move the logic into a file without React or MUI imports, as components/widgets/optionKeys.js does in #421. Read the two source-reading tests named in the issue, tests/unit/search-bar-call-sites.test.mjs and tests/unit/search-bar-extenders.test.mjs, to see the pattern being discouraged. Done when the section exists, points to e2e tests in tests/e2e/ for on-screen behavior, and the timing note about landing between course pushes is respected.

Written by the indexing model from the issue text.

Description

documentation good first issue

What's missing

TESTING.md doesn't say how to unit-test code that lives in a React component. The unit tests run with node --test, which can't load React or MUI, so recent PRs have worked around it by reading the component's source file as text and matching patterns in it:

  • #421 tests/unit/search-bar-call-sites.test.mjs counts exactly four keyForLabel(...) calls in SearchBarExtensible.js.
  • #420 tests/unit/search-bar-extenders.test.mjs checks the source for open={open}, and tests a copy of shouldOfferExtenders instead of the real one.

Tests like these fail when someone reorganizes the file without breaking anything, and they can pass when the behavior is broken (#420's did).

What to add

A short section in TESTING.md:

  • Put logic you want to unit-test in a small file with no React or MUI imports, and import it in both the component and the test. components/widgets/optionKeys.js (#421) is the example to follow.
  • Don't write unit tests that read a component's source code as text.
  • Check what a component does on screen with an e2e test in tests/e2e/.

Optionally, once this lands, remove the source-reading parts of the two tests above if they are still there.

Timing

This changes contributor-facing guidance, so it should land between course assignment pushes, with a heads-up to open PRs.

Dominant language
JavaScript
Stars
3
Forks
18
Avg merge
1d 21h
Merged PRs (30d)
30

Getting set up

Open in Codespaces

Starts the project's dev container in your browser, under your own GitHub account.

  • Ships a Dockerfile or Docker Compose file
  • Has a pull request template
  • No contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from ReduxISU/Redux_GUI

All issues in ReduxISU/Redux_GUI

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.