这是indexloc提供的服务,不要输入任何密码
Skip to content

Switch to vitest for testing #1147

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: master
Choose a base branch
from

Conversation

csandman
Copy link
Contributor

@csandman csandman commented May 15, 2025

I noticed that this package is now looking for maintainers @wellyshen, and I'm potentially interested in becoming one! There are a few more changes I believe would make this package modern and easier to maintain. I already have experience creating and maintaining open source projects, such as my NPM package chakra-react-select which receives around 180k downloads a week now.

I'm not sure how much time I would have to be a full-time maintainer, but there are at least a few other changes I'd like to make to get this package modern again:

  1. Update all of the dependency packages. A lot of the dependency packages for this project are pretty far out of date, making it more difficult to get things set up properly.
  2. Potentially switch to a more modern build tool, tsup. After having implementing it in my own project, I can attest that it dramatically simplified the build process, as it handles TypeScript out of the box, and always outputs properly structured dist code for both ESM and CJS. This would also help with updating the packages as you wouldn't need to deal with all of the rollup or babel packages anymore!
  3. Update the demo project to use vite. I noticed that it was originally created using create-react-app (or I assume based on the dependency of react-scripts) which has been deprecated for a long time. Vite is the most recommended approach for creating new react-apps without a full framework, and is very easy to setup. It also makes the testing process a lot easier, as you can import the package directly from the source, making local development much simpler (you can see my project for an example).

Those are the changes to get the project up to date, but there is also the big one, #1146. This project will eventually need to support the new Places API, and I'm interested in helping with that! I have already gotten a version mostly working that I made from copying the source directly into one of my projects. However, the API changes are pretty large, and it will definitely be a very breaking change for most people. Ultimately, it has to be done at some point if people want to continue using this project though, and I'd like to help with that effort.

I think the results will be a lot easier to use too. They switched all of their APIs to be promise based, and they have their new(ish) @googlemaps/js-api-loader package, which makes the process of loading the gmaps API script way more consistent, and less work on the end user. With that installed, the only thing users would need to do is pass an API key.

Anyway, I digress. Let me know if you're interested in me helping with any of these changes @wellyshen!


And finally, on to what this PR is actually for!

What

This PR modernizes the tests for this package by switching to vitest in place of jest.

Why

Vitest has an almost identical API to jest, and provides much better compatibility for ESM, TypeScript, and JSX out of the box. It's much cleaner to implement IMO, and is a good step towards getting everything in this package up to date with modern standards.

How

I removed all jest related packages, added vitest, along with all the other required companion packages. I also updated the test script to run vitest instead of jest. Next, I added imports for all of the vitest functions, because they aren't globals by default (and I honestly think it's better to be explicit with them). Finally I renamed the test files to match the defaults for vitest's file matcher.

Here is the new output from running yarn test:

$ vitest

 RUN  v3.1.1 /Users/chris/code/use-places-autocomplete-fork

 ✓ src/tests/getLatLng.test.ts (1 test) 2ms
 ✓ src/tests/debounce.test.ts (1 test) 3ms
 ✓ src/tests/getZipCode.test.ts (3 tests) 2ms
 ✓ src/tests/getGeocode.test.ts (6 tests) 4ms
 ✓ src/tests/getDetails.test.ts (4 tests) 4ms
 ✓ src/tests/useLatest.test.ts (1 test) 7ms
 ✓ src/tests/usePlacesAutocomplete.test.ts (14 tests) 36ms

 Test Files  7 passed (7)
      Tests  30 passed (30)
   Start at  22:45:23
   Duration  807ms (transform 150ms, setup 0ms, collect 462ms, tests 56ms, environment 2.68s, prepare 503ms)

✨  Done in 1.18s.

And the results of yarn test:cov:

$ yarn clean:cov && vitest --coverage
$ rimraf coverage

 RUN  v3.1.3 /Users/chris/code/use-places-autocomplete-fork
      Coverage enabled with v8

 ✓ src/tests/debounce.test.ts (1 test) 4ms
 ✓ src/tests/getZipCode.test.ts (3 tests) 2ms
 ✓ src/tests/getLatLng.test.ts (1 test) 2ms
 ✓ src/tests/getDetails.test.ts (4 tests) 4ms
 ✓ src/tests/getGeocode.test.ts (6 tests) 4ms
 ✓ src/tests/useLatest.test.ts (1 test) 9ms
 ✓ src/tests/usePlacesAutocomplete.test.ts (14 tests) 41ms

 Test Files  7 passed (7)
      Tests  30 passed (30)
   Start at  23:04:04
   Duration  916ms (transform 201ms, setup 0ms, collect 573ms, tests 67ms, environment 2.65s, prepare 441ms)

 % Coverage report from v8
--------------------------|---------|----------|---------|---------|-------------------
File                      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
--------------------------|---------|----------|---------|---------|-------------------
All files                 |   98.45 |    94.02 |     100 |   98.45 |                   
 debounce.ts              |     100 |      100 |     100 |     100 |                   
 useLatest.ts             |     100 |      100 |     100 |     100 |                   
 usePlacesAutocomplete.ts |   97.67 |     90.9 |     100 |   97.67 | 91,113,150        
 utils.ts                 |     100 |      100 |     100 |     100 |                   
--------------------------|---------|----------|---------|---------|-------------------

Checklist

Have you done all of these things?

  • Documentation added (N/A)
  • Tests
  • TypeScript definitions updated (N/A)
  • Ready to be merged

@FullStackKevinVanDriel
Copy link

FullStackKevinVanDriel commented May 22, 2025

Yeah I'm running into this issue now too and it's breaking a site we're developing. Particularly the legacy api part.

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