reinitialization w/ vite #69
Conversation
There was a problem hiding this comment.
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).
…of currently liked messages
…at end of wave 02
Mikellewade/vite
modified test.sh
| import ChatEntry from './ChatEntry'; | ||
| import { render, screen } from '@testing-library/react'; | ||
| import '@testing-library/jest-dom'; |
There was a problem hiding this comment.
Is vitest compatible with this jest-dom testing library? Why did it change from the previous import '@testing-library/jest-dom/extend-expect';?
There was a problem hiding this comment.
I had ran into the error Error: Missing "./extend-expect" specifier in "@testing-library/jest-dom" package and came across this as a solution.
There was a problem hiding this comment.
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. 👍
| @@ -1,6 +1,4 @@ | |||
| import React from 'react'; | |||
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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?
Co-authored-by: Ansel Rognlie <[email protected]>
Co-authored-by: Ansel Rognlie <[email protected]>
Co-authored-by: Ansel Rognlie <[email protected]>
Co-authored-by: Ansel Rognlie <[email protected]>
|
|
||
| Note: We do not need to include the `id` and `liked` fields for Wave 01. Additionally, you should not build your own logic to handle converting the absolute value of `timeStamp` to a relative value for display. Please refer to the [setup docs](./setup.md#hint-the-timestamp-component) for tips about how to utilize the `TimeStamp` component already provided. | ||
|
|
||
| ## Imports |
|
|
||
|  | ||
|
|
||
| ## Imports |
Co-authored-by: Ansel Rognlie <[email protected]>
Co-authored-by: Ansel Rognlie <[email protected]>
Asana Ticket: https://app.asana.com/0/1205655776549324/1205770483276175/f
PR to port React Chatlog from yarn/CRA to npm/VIte:
Testing
create-react-appis no longer being maintained and therefore removedreact-scriptsfrom project and replaced withvitest.vitestis maintained by theviteteam 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 thatvitestwould 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 runnpm run testand for VScode please install: https://marketplace.visualstudio.com/items?itemName=ZixuanChen.vitest-explorerhttps://vitest.dev/guide/