Set up testing environment #682
Conversation
Fix an error where Vite doesn't like JSX being in files with .js extensions.
Remove the mandatory setting for name because there's a default value provided
ManpreetSL
force-pushed
the
test/add-frontend-tests
branch
from
0c3e16b
to
77e2696
Compare
apps/frontend/setupTests.ts
Outdated
| global.fetch = jest.fn().mockResolvedValue( { | ||
| json: () => Promise.resolve( {} ), | ||
| } ) |
There was a problem hiding this comment.
Be careful with mocks like these! I think it's ok for now to get the tests to pass, but we should see if there's a more established/clear method for mocking fetch etc
There was a problem hiding this comment.
If you have a better way, let me know... Google wasn't very helpful with this.
| } | ||
|
|
||
| describe( 'hooks', () => { | ||
| describe( 'useCopyToClipboard()', () => { |
There was a problem hiding this comment.
This suite ends up testing a lot of the internals of the function, rather than outcome! You can try to test the outcome of hooks by setting up a scaffolding React component, and then asserting against the outcomes, as we'd normally do :)
There was a problem hiding this comment.
So with this, I'm looking to implement:
- Check what was copied to the clipboard
- Check for a snackbar and its text to appear on the screen using RTL
Does that sound sensible?
| const isMacMockGetter = jest.fn() | ||
|
|
||
| jest.mock( './consts', () => ( { | ||
| get isMac() { | ||
| return isMacMockGetter() | ||
| }, | ||
| } ) ) |
There was a problem hiding this comment.
Very interesting approach! I think there might be a simpler option:
import * as consts from './consts'
consts.isMac = true
might work
There was a problem hiding this comment.
Cannot assign to 'isMac' because it is a read-only property.
| coverageDirectory: 'coverage', | ||
|
|
||
| // Indicates which provider should be used to instrument code for coverage | ||
| coverageProvider: 'v8', |
There was a problem hiding this comment.
Are these options required?
There was a problem hiding this comment.
These were created from the initial Jest setup, I think. Do you want me to remove them?
| "target": "ESNext", | ||
| "lib": ["ESNext"], | ||
| "useDefineForClassFields": true, | ||
| "target": "es5", |
There was a problem hiding this comment.
Do you know which fields are required here?
There was a problem hiding this comment.
How do I figure that out?
Currently, the project doesn't have working test functionality. We want to be able to use Jest and React Testing Library to add unit and integration tests to the app. However, there are a few build errors such as a compatibility issue between MUI and React 18.
This PR fixes build errors, and then sets up and configures Jest and React Testing Library, along with adding some basic tests to ensure that the environment works properly.