React application, #stomp/stompjs library
If I start React app, it opens 2 websocket connections.
console log
network log
If I build and deploy it to server, it opens only one connection.
console log
network log
chat.js
import React from 'react';
import { Client, Message } from '#stomp/stompjs';
function Chat(props) {
const client = new Client({
brokerURL: 'ws://localhost:8088/api/chat',
debug: function (str) {
console.log(str);
},
reconnectDelay: 5000,
});
client.onConnect = function (frame) {
client.subscribe("/chat", function (message) {
console.log("MESSAGE: " + message)
})
};
client.onStompError = function (frame) {
console.log('Broker reported error: ' + frame.headers['message']);
console.log('Additional details: ' + frame.body);
};
client.activate();
return (
<p>chat</p>
);
}
export default Chat
package.json
{
"name": "react-test",
"version": "0.1.0",
"private": true,
"dependencies": {
"#stomp/stompjs": "^6.1.0",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.21.1",
"dotenv": "^10.0.0",
"http-proxy-middleware": "^2.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2",
"websocket": "^1.0.34"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build && mv build/* ../src/main/resources/static'",
"test": "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"
]
}
}
I don't want to always build my app or receive double events. How can I fix that?
WebSocket is a "side effect" and React.useEffect fixed it
https://stackoverflow.com/a/57809487
Related
I want to display code coverage for testing React in Cypress
The package.joson look like this
{
"name": "guitesttraining",
"version": "0.1.0",
"private": true,
"jest": {
"collectCoverageFrom": [
"src/components/**/*.js"
],
"coverageReporters": [
"cobertura",
"text"
]
},
"dependencies": {
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"jest-junit": "^13.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"serverless-finch": "^4.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts -r #cypress/instrument-cra start",
"build": "react-scripts build",
"test": "react-scripts test --coverage --reporters=default --reporters=jest-junit",
"eject": "react-scripts eject",
"cypress:run": "cypress run --record --key 3339aabe-1bcc-4f8c-8098-d08f47ac0b9b",
"postcypress:run": "npx nyc report --reporter=cobertura",
"cypress:open": "cypress open"
},
"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": {
"#cypress/code-coverage": "^3.9.12",
"#cypress/instrument-cra": "^1.4.0",
"#testing-library/cypress": "^8.0.2",
"#testing-library/jest-dom": "^5.16.2",
"cypress": "^9.5.2",
"cypress-jest-adapter": "^0.1.1",
"nyc": "^15.1.0"
}
}
The cypress/support/index.js
import './commands'
import 'cypress-jest-adapter'
import '#testing-library/cypress/add-commands'
import '#cypress/code-coverage/support'
The cypress/pluging/index.js
module.exports = (on, config) => {
require('#cypress/code-coverage/task')(on, config)
return config
}
After I have executed run start "react-scripts -r #cypress/instrument-cra start"
Console do not contain window.coverage object in the "Application under test iframe"
When I run npm run cypress:run I get a error message
- should toggel display and hide of details ⚠️ file /Users/steinko/development/cypresstaining/webtestingtraining/.nyc_output/out.json
has no coverage information Did you forget to instrument your web
application? Read
https://github.com/cypress-io/code-coverage#instrument-your-application
What must I do to instrument the web application?
I toght that running react-scripts -r #cypress/instrument-cra start instrumeneted the web application
I found a issue, instrument-cra still does not support react-scripts v5. After I try react-scripts v4.0.3, it does not work also.
The fetch call response with "You need to enable JavaScript to run this app.". If I add "proxy": "http://localhost:3000", in the package.json, the response is following: HTTP 431 Request Header Fields Too Large, but the fetch file size is just 160 Bytes long.
The content of React.Component is as follows:
export default class Test extends React.Component<any, State> {
constructor(props: any) {
super(props);
fetch('api/Test/Select', {
headers: { 'Content-Type': 'application/json' },
method: 'GET',
})
.then(response => response.json())
}
}
The Connector method is as follows:
[HttpGet("Select")]
public IActionResult Select()
{
try
{
return Ok();
}
catch (Exception ex)
{
return Conflict(ex);
}
}
The package.json file contents are as follows:
{
"name": "clientapp",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:3000",
"dependencies": {
"#testing-library/jest-dom": "^5.15.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"react-router-dom": "6.0.2",
"web-vitals": "^1.1.2",
"#types/react": "17.0.37",
"#types/reactstrap": "8.7.2",
"antd": "4.17.2"
},
"devDependencies": {
"cross-env": "7.0.3",
"typescript": "4.5.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "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"
]
}
}
Maybe .NET 6 has an Bug with the fetch, idk.
I just downgraded the Project to .NET Core 3.1 and everything is woking fine.
I followed tailwind documentation to install it in react using create-react-app.
I cant find any mistakes in the instalation but i got an error when starting the app.
./node_modules/tailwindcss/node_modules/color/index.js 246:28
Module parse failed: Identifier directly after number (246:28)
File was processed with these loaders:
./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| for (const [i, element] of rgb.entries()) {
| const chan = element / 255;
> lum[i] = chan <= 0.039_28 ? chan / 12.92 : ((chan + 0.055) / 1.055) ** 2.4;
| }
|
The node_modules/color/index.js (246:28) havent been touched and looks fine.
tailwind.confi.js and craco.config.js are exactly as tailwind documentation for react.
this is my package.json
{
"name": "2109-sailaway",
"version": "0.1.0",
"private": true,
"dependencies": {
"#craco/craco": "^6.3.0",
"#heroicons/react": "^1.0.4",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.22.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco 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": {
"autoprefixer": "^9.8.8",
"postcss": "^7.0.39",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.2.16"
}
}
Any help please
I created a react project with create-react-app some times ago and i wanted to add some test with jest. I read that Jest comes with create-react-app, but when i try to run the simple test that comes with the project by typing "yarn test", i have this error message: TypeError: (0 , _react2.test) is not a function
The test:
import React from 'react';
import { render, screen, expect, test} from '#testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
The result:
My package.json
{
"name": "test-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.11.4",
"#material-ui/icons": "^4.11.2",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^13.1.9",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^2.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint . --ext .js,.jsx",
"lint-fix": "npm run lint -- --fix"
},
"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": {
"eslint": "^7.28.0",
"eslint-plugin-react": "^7.24.0"
}
}
Does anyone know what i am missing ? Thank you !
I have following function in actions.js file
export const mockFunction = () => {
return true
}
I have an index.js file, where I want to export this function to the rest of the app
import * as actions from './actions'
export {actions}
I get as error:
Failed to compile
./src/providers/xxform_provider/actions.jsx
Error: ENOENT: no such file or directory, open '/Users/client/xxxx/src/providers/xxform_provider/actions.jsx'
I am not using webpack, actually I guess no, if I have a look at my package.json
I am using create-react-app
https://github.com/facebook/create-react-app
Does anybody know what create-react-app uses as a js bundler? I can not tell from the package.json file
{
"name": "react_porter",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.26",
"#fortawesome/free-solid-svg-icons": "^5.12.0",
"#fortawesome/react-fontawesome": "^0.1.8",
"#material-ui/core": "^4.9.0",
"#material-ui/lab": "^4.0.0-alpha.40",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"moment": "^2.24.0",
"react": "^16.12.0",
"react-datetime": "^2.16.3",
"react-dom": "^16.12.0",
"react-facebook-login": "^4.1.1",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0",
"react-swipe": "^6.0.4",
"react-swipeable-views": "^0.13.5",
"styled-components": "^5.0.0",
"swipe-js-iso": "^2.1.5",
"swipejs": "^2.2.14"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
actions.js
const mockFunction = () => true;
export default mockFunction;
index.js
import mockFunction from './actions';
i hope this helps