react: docker-compose up not reloading after test

Question

Is your proposal related to a problem?

docker-compose up not reloading after test code changes.

(I'm using vs code in a Windows)

1. I used docker-compose up to run apps with React app containers and React app test containers.
2. The react-app was executed normally, but the react-app-test was forced to shut down.

I create an app using docker-react-app and use docker-compose up the app was’t reloaded when I edited and saved some file.

docker-react-app reflects code changes saved in live, but test does not.

Describe the solution you'd like

I want to use Hot Reloading on my Projects located in Windows file system form test.

If you change the code in App.js and save it, it will be reflected on the web If I change the code content of App.test.js and save it, I want to get reloaded from the terminal.

I also set the configuration for the below. React app changes these two things, so that's enough But the test doesn't change.

docker-compose.yml

environment:
  - CHOKIDAR_USEPOLLING=true

package.json

"scripts": {
"start": "WATCHPACK_POLLING=true react-scripts start",
"build": "react-scripts build",
"test": "WATCHPACK_POLLING=true react-scripts test",
"eject": "react-scripts eject"

this is my project link

Dockerfile.dev

FROM node:alpine

WORKDIR /usr/src/app

COPY package.json ./

RUN npm install

COPY ./ ./

CMD ["npm", "run", "start"]

package.json

{
  "name": "docker-react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "WATCHPACK_POLLING=true react-scripts start",
    "build": "react-scripts build",
    "test": "WATCHPACK_POLLING=true react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
  }
}

docker-compose.yml

version: "3"
services:
  react:
    build: 
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "3000:3000"
    volumes:
      - /usr/src/app/node_modules
      - ./:/usr/src/app
    environment:
      - CHOKIDAR_USEPOLLING=true
    stdin_open: true
    
  tests:
    build: 
      context: .
      dockerfile: Dockerfile.dev
    volumes:
      - /usr/src/app/node_modules
      - ./:/usr/src/app
    environment:
      - CHOKIDAR_USEPOLLING=true
    command: ["npm", "run", "test"]

not reloading after test code Change

If you know a solution to this problem, please help me. Thank you very much

+++++++++++++++++++++++++++++++++++++++++++++ My test container was forced to shut down and couldn't last, but I didn't know why it was forced to leak

A worker process has failed to exit gracefully and has been force exited. This is likely caused by tests leaking due to improper teardown. Try running with --detectOpenHandles to find leaks. Active timers can also cause this, ensure that .unref() was called on them.

Answer 1

I've solved this problem. I'm going to leave it in case someone like me sees it.

What should I check if an error like mine occurs

1. Windows users must set it up when using docker-compose up

For Windows to use docker-compose up, for each service you want to add in the docker-compose.yml

environment:
  - CHOKIDAR_USEPOLLING=true

and check if the package.json file scripts part is the default.

2. Make sure that the test itself is working properly

(make sure that what is being rendered is included in the contents of the app component)

In my case, I ran the test and react app at the same time, and the react container frequently changed the app component text to check if the app works well and reloads, and the was spinning around at number 1 without test container checking if it

In the end, my problem was an answer that came out quickly when I examined the operating principles one by one from the beginning.

docker-compose.yml

version: "3"
services:
  react:
    build: 
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "3000:3000"
    volumes:
      - /usr/src/app/node_modules
      - ./:/usr/src/app
    environment:
      - CHOKIDAR_USEPOLLING=true
    stdin_open: true
    
  tests:
    build: 
      context: .
      dockerfile: Dockerfile.dev
    volumes:
      - /usr/src/app/node_modules
      - ./:/usr/src/app
    environment:
      - CHOKIDAR_USEPOLLING=true
    command: ["npm", "run", "test"]

package.json

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"

App.test.js

import React from 'react';
import { render } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  const { getByText } = render(<App />);
  const linkElement = getByText(/리로딩주시오/);
  expect(linkElement).toBeInTheDocument();
});

App.js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          리로딩주시오

        </a>
      </header>
    </div>
  );
}

export default App;