NodeJS React:docker-compose up测试后未重新加载

ssgvzors  于 2023-06-22  发布在  Node.js
关注(0)|答案(1)|浏览(138)
    • 您的建议是否与问题有关?**
      docker-compose up在测试代码更改后未重新加载。

(我在Windows中使用vs代码)
1.我使用docker-compose up来运行带有React应用容器和React应用测试容器的应用。

  1. react-app正常执行,但react-app-test被强制关闭。
    我使用docker-react-app创建了一个应用程序,并使用docker-compose,当我编辑和保存一些文件时,应用程序没有重新加载。
    docker-react-app会反映live中保存的代码更改,但test不会。
    • 描述您想要的解决方案**

我想对位于Windows文件系统表单测试中的项目使用热重新加载。
如果您更改了App.js中的代码并保存它,它将反映在Web上如果我更改了App.test.js的代码内容并保存它,我想从终端重新加载。
我还设置了下面的配置。React app改变了这两件事,所以这就足够了,但测试没有改变。

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
如果你知道这个问题的解决方法,请帮助我。非常感谢
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++


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.

wko9yo5t

wko9yo5t1#

我已经解决了这个问题。我要把它留在这里,以防像我这样的人看到。
如果发生像我这样的错误,我应该检查什么

  1. Windows用户在使用docker-compose up时必须设置它
    对于Windows使用docker-compose up,对于您想要在docker-compose.yml中添加的每个服务
environment:
  - CHOKIDAR_USEPOLLING=true

并检查package.json文件脚本部分是否为默认值。
1.确保测试本身工作正常
(make确保正在呈现的内容包含在应用程序组件的内容中)
在我的例子中,我同时运行了test和react应用程序,react容器频繁地更改应用程序组件文本以检查应用程序是否运行良好并重新加载,并且在没有测试容器检查的情况下在数字1处旋转
最终,我的问题是一个答案,当我从一开始就一个接一个地检查操作原理时,它很快就出来了。
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;

相关问题