ReferenceErrors when running tests in Docker

[tespin]

p5.js version

2.14.0

What is your operating system?

Mac OS

Web browser and version

Firefox 122.0

Actual Behavior

npm run test fails on several test suites with the following errors:

ReferenceError: $RefreshSig$ is not defined
ReferenceError: $RefreshReg$ is not defined

Tests were run on a fresh Docker installation of the repo on the develop branch, using docker compose version v2.28.1-desktop.1.

Screenshot is attached but here are the affected test suites for me:

• Modal.unit.test.jsx
• Editor.unit.test.jsx
• Nav.unit.test.jsx
• Toast.test.jsx
• EditorAccessibility.unit.test.jsx
• Toolbar.unit.test.jsx
• ErrorModal.unit.test.jsx
• SketchList.unit.test.jsx
• Preferences.unit.test.jsx
• FileNode.unit.test.jsx
• ButtonOrLink.unit.test.jsx
• index.integration.test.jsx

Expected Behavior

Tests for affected components should run.

Steps to reproduce

Steps:

1. Follow Docker installation instructions to set up dev environment.
2. Open a terminal in the Docker server with docker compose -f docker-compose-development.yml exec app bash -l.
3. Run npm run test.

It's my first time setting up p5 locally -- the app runs fine in my browser but I'm unsure how to troubleshoot these errors! Thanks for the help.

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[raclim]

Thanks for raising this issue @tespin! I realized recently that some of the Docker setup isn't up to date since I don't use it too often 😅 so I'm sorry about any issues that you've been facing here!

I know that while our tests currently pass, they do have a few issues/warnings that pop up but will probably be addressed once the related components are refactored. However, I haven't encountered this error in particular, so I think it's probably stemming from how things are set up in the Docker configuration files. It also seems like this error is related to @pmmmwh/react-refresh-webpack-plugin, so the setup for this plugin may need to be adjusted as well. I'll try to take a further look into this and hopefully have an update by tomorrow!

[tespin]

lol no worries! I was so stumped yesterday but will keep troubleshooting. I'll do the manual install in the meantime -- thanks for your attention @raclim.

[raclim]

Sounds good, I'll try to keep looking into this as well! Thanks so much for being flexible!

[Harshit-7373]

@raclim

1. Multiple test suites are failing due to (ReferenceError: $RefreshSig$ is not defined and $RefreshReg$ is not defined errors).
2. It seems like this error is related to (@pmmmwh/react-refresh-webpack-plugin) but Also According to me there is some issue in the .babelrc file that is causing these errors.

Thank you . I am currently looking into the matter and will work on resolving the issue as soon as possible.

[Harshit-7373]

@tespin @raclim

1. I tried to investigate the reason behind these errors occurring inside the Docker terminal while running the tests.

2. Based on my understanding, React Fast Refresh is a development feature that relies on certain functions to enable hot reloading of React components. Hot reloading allows components to be updated in real-time during development without losing the app's state. However, since Jest doesn't run in a development environment with Fast Refresh enabled, it throws errors when it encounters JSX code expecting these functions to be present.

3. In order to resolve these errors, I followed these steps:

   (A)  First, I installed the necessary Babel plugins: @babel/plugin-transform-react-jsx and react-refresh.
   (B) Then, I updated the .babelrc file to include the required presets and plugins for handling React JSX transformation.
   (C) Additionally, I modified the jest.setup.js file to mock the $RefreshReg$ and $RefreshSig$ functions in order to prevent 
         issues related to React Fast Refresh during testing.
   

These changes helped me resolve several errors. Specifically, after applying these steps:

The number of failed test suites decreased from 15 to 3 out of 23.
 Only 1 test still fails.
All 4 snapshots passed, as shown in the image below:

*** However, some errors persist. The remaining issues are as follows:

   1. The errors appear to be related to propTypes definitions in certain components, specifically EditorAccessibility and DropdownMenu. The issue arises because the components for which we're defining propTypes seem to be undefined when accessed.'

  2. Additionally, there are some import-related issues where the paths are not correctly defined.

Here are the remaining error details:

***Also , I feel making changes in the webpack configuration files will also help to solve this issue.

[raclim]

Thanks for taking a look into this @Harshit-7373—I do feel like the steps you proposed so far are closer to the potential solution!

I think I've tried something similar and also ended up with the remainder errors. I'm wondering if there might be another solution that wouldn't require mocking $RefreshReg$ and $RefreshSig$ in Jest and ensures @pmmmwh/react-refresh-webpack-plugin does not run in the develop environment altogether by looking closer into the webpack configuration files? Let me know if you feel otherwise!

[Harshit-7373]

@raclim This can solve the issue because:

1. Jest does not support React Fast Refresh, so the plugin should not run when executing Jest tests.
2. If the plugin runs, Jest will throw errors because $RefreshReg$ and $RefreshSig$ do not exist in the Jest environment, which
   is the issue we are currently facing.
3. Additionally, after making these changes, we will need to update certain files due to "propTypes errors," primarily in
   DropdownMenu.jsx and other files mentioned in the images uploaded above.
4. I am currently working on this and will resolve the issue soon.