reinitialization w/ vite

[mikellewade]

Asana Ticket: https://app.asana.com/0/1205655776549324/1205770483276175/f

PR to port React Chatlog from yarn/CRA to npm/VIte:

Testing

create-react-app is no longer being maintained and therefore removed react-scripts from project and replaced with vitest. vitest is maintained by the vite team and offers benefits such as speed and pipelining configurations. Though we won't necessarily see the benefits of this with the scope of React chatlog, instructors (Mikelle, Ansel, and Ashley) decided that vitest would be the best route to take when weighed against configuring Jest testing for the project (Jest does not intrinsically know anything about JSX files). To run the testing command in terminal run npm run test and for VScode please install: https://marketplace.visualstudio.com/items?itemName=ZixuanChen.vitest-explorer

https://vitest.dev/guide/

[anselrognlie]

The linter wasn't working for me out of the box. There are some lingering jest stuff that's gumming it up. I included the version of .eslintrc.js that I was able to get working, and the plugin that needs to be installed in the package.json. After that, a lint pass would be a good idea.

There are a few tickets for this project that we could include in this change as well (links in a comment)

The images should be updated for our new standards.

We should update the docker container and test it in learn to make sure that it works properly (see comment on test.sh).

[anselrognlie]

Thanks for addressing the other related tickets. I made a few phrasing suggestions. I'm also wondering whether we should leave some of those starting imports, even though they do cause linter errors at the start. Details in the comments.

[anselrognlie]

🙌

[anselrognlie]

Is vitest compatible with this jest-dom testing library? Why did it change from the previous import '@testing-library/jest-dom/extend-expect';?

[mikellewade]

I had ran into the error Error: Missing "./extend-expect" specifier in "@testing-library/jest-dom" package and came across this as a solution.

[anselrognlie]

I see. And that import is providing the toBeInTheDocument() method. And that neceissitated adding the vitest setup file to extend expect manually. Got it. Thanks. 👍

[anselrognlie]

The import React lines were causing linter warnings and are no longer necessary, so removing those is fine. 👍

For other imports in the project, even though they report linter warnings on the bare project, should we leave them in since they'll be needed later? Or maybe we should add reminders to the waves where they would be required for students to add them?

For the latter, I would say that we don't need to provide the explicit import line itself, but maybe something more along the lines of

Remember that the values we need for defining proptypes come from an external library and must be imported. We'll also need to be sure to import any other components used in each file.

Here especially, I'd be a little concerned that students wouldn't know to import the json file as we're doing, since we nevere really talk about that.

[mikellewade]

This crossed my as well, my initial thought was to leave them out since they would encounter errors in the console if they try to utilize them without importing. I figured it would be a good place for them to get that practice. I think your reminder is a good one! You want to add to every wave, correct?

[anselrognlie]

If you prefer adding reminders to having the imports, that works for me too. In the required implementation, it looks like only waves 1 and 2 require adding imports. Wave 2 would need to also mention importing the json file (maybe say that the name used in the import will end up being the variable name we'll use to access the loaded data?) The optional enhancements might also require some imports depending on their implementation choices, so maybe a fairly broad statement about being sure to keep track of their imports as they work?