I'm trying to use Jest to aid Puppeteer testing in WebStorm.
It is my first time using Jest and it looks just the framework I need to help with testing, assertions, setup and teardown etc...
Trouble is, WebStorm won't recognise the keywords e.g. beforeAll, describe, afterAll. Here's a snippet:
My package.json file looks like this:
{
"name": "ui-tests",
"version": "1.0.0",
"description": "End-to-end UI tests",
"author": "John Doe",
"license": "MIT",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.0.17"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"debug": "NODE_ENV=debug npm test",
"eject": "react-scripts eject"
},
"jest": {
"testURL": "http://localhost"
},
"devDependencies": {
"faker": "^4.1.0",
"jest-cli": "^22.0.4",
"jest": "^22.0.4",
"puppeteer": "^1.9.0"
}
}
I have the following plugins installed:
Any ideas?
Thanks
I installed "jest" library as it described here:
In Preferences | Languages & Frameworks | JavaScript | Libraries,
press Download..., select 'jest' from the list of available stubs,
press Download and Install
https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000357324-Get-rid-of-Unresolved-function-method-variable-warning-in-Jest-test-files
That helped me with most definitions. Though I still have the same issue with "jest-puppeteer".
Related
I have a Nuxt project of listing booking.
I have done all my API calls and configuration in index.js in the store folder. I would link to display the listing gotten from the API call on my listing.vue page.
How do I print my retrieved data or make my index.js accessible anywhere in the app?
package.json
{
"name": "lisngbook",
"version": "1.0.0",
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"#nuxtjs/axios": "^5.13.6",
"core-js": "^3.9.1",
"nuxt": "^2.15.3",
},
"devDependencies": {
"#nuxtjs/moment": "^1.6.1"
},
I want to host a react.js server side rendering because of ffmpeg killing me with SharedArrayBuffer is not defined
I've tried so many hosting service provider like firebase but now I want to host it to Vercel but I don't know how to make it works with react ssr. Can anyone help me?
When I run 'ssr' command in my machine it's work and ffmpeg is not throwing 'bad memory' or 'SharedArrayBuffer is not defined' but when I run it in vercel build command it stucks but the index.js/server.js is running I know because the main script is running and won't stop so the build is stuck but any solution? I've search the problem but I guess nobody haven't asked this yet
and this a code of package.json
{
"name": "ultimatesheep-vidreverse",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/preset-env": "^7.18.10",
"#babel/preset-react": "^7.18.6",
"#babel/register": "^7.18.9",
"#ffmpeg/core": "^0.11.0",
"#ffmpeg/ffmpeg": "^0.11.0",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"bootstrap": "^5.2.0",
"cors": "^2.8.5",
"ignore-styles": "^5.0.1",
"react": "^18.2.0",
"react-bootstrap": "^2.5.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"uuid": "^8.3.2",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"ssr": "npm run build && node backend/index.js",
"deploy": "npm run build && firebase deploy",
"git" : "git add . && git commit -m 'ahawdaw' && git push -u origin main"
},
"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"
]
},
"externals": {
"react": "React"
},
"description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
"main": "backend/index.js",
"keywords": [],
"author": "",
"license": "ISC"
}
if you're having the same problem as me in the past, try checking out next.js and I fixed all the problem I had!
i have problem with next js app in server side.
When i build and export my app in production in first i can see dom element and after 2 second i can see my styles. Its look really weird.
I read about problem with css in jsx in next after update framework.
In dev mode all work fine but after build in server side its look weird.
i will show you my page:
http://podnosniki-michalski.pl
and package.json
{
"name": "project_name",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"prod": "next export"
},
"dependencies": {
"next": "9.4.4",
"next-images": "^1.4.0",
"prop-types": "^15.7.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-multi-carousel": "^2.5.5",
"react-reveal": "^1.2.2",
"styled-components": "^5.1.1"
},
"devDependencies": {
"#babel/core": "^7.10.2",
"babel-loader": "^8.1.0",
"babel-plugin-styled-components": "^1.10.7"
}
}
I checked your site, the styles are not rendered on the server side. Because you are using styled-components, follow their guide to generate styles on server-side.
https://styled-components.com/docs/advanced#server-side-rendering
I get a "500 Server Error" when I deploy my Nuxt application.
Below are my configuration files:
package.json
{
"name": "my-app-name",
"version": "1.0.0",
"description": "An App",
"author": "Me",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "NODE_ENV=production nuxt",
"deploy": "npm run build && gcloud app deploy",
"generate": "nuxt generate",
"postinstall": "nuxt build"
},
"dependencies": {
"#nuxtjs/axios": "^5.0.0",
"#firebase/firestore": "^0.6.0",
"#firebase/storage": "^0.2.3",
"firebase": "^5.3.0",
"nuxt": "^1.0.0",
"nuxt-buefy": "^0.0.4"
},
"devDependencies": {
"cross-env": "^5.0.1",
"node-sass": "^4.9.2",
"nuxt-sass-resources-loader": "^2.0.3",
"sass-loader": "^7.0.3"
}
}
Previously my start was nuxt start and i do not have deploy
https://github.com/kamatte-me/nuxt-gae-se/blob/master/package.json
But still get the same error.
app.yaml
runtime: nodejs8
env : standard
I also referred and attempted to try out the suggestions here and here but doesn't work. Note that my application does not have a server.js or app.js, so i cannot use those.
Update
I did a workaround using the below approach (so can ignore everything above unless you need it as additional reference).
I added a server.js (exactly same as theirs) following https://github.com/kamatte-me/nuxt-gae-se and updated my package.json to such:
{
"name": "my-app-name",
"version": "1.0.0",
"description": "A App",
"author": "Me",
"private": true,
"scripts": {
"dev": "node server.js",
"build": "nuxt build",
"start": "NODE_ENV=production node server.js",
"deploy": "npm run build && gcloud app deploy",
"generate": "nuxt generate",
"postinstall": "nuxt build"
},
"dependencies": {
"#nuxtjs/axios": "^5.0.0",
"#firebase/firestore": "^0.6.0",
"#firebase/storage": "^0.2.3",
"express": "^4.16.3", //<-added this as suggested by kamette
"firebase": "^5.3.0",
"nuxt": "^1.0.0",
"nuxt-buefy": "^0.0.4"
},
"devDependencies": {
"cross-env": "^5.0.1",
"node-sass": "^4.9.2",
"nuxt-sass-resources-loader": "^2.0.3",
"sass-loader": "^7.0.3"
}
}
Now my error is this:
Any idea?
I have this in my Navigation.vue:
<nuxt-link to="/" exact>Dashboard</nuxt-link>
In addition, the error logs I saw:
After adding "nuxt-sass-resources-loader": "^2.0.3" to the dependencies as advised by kamatte, I am seeing back the "500 Server Error" again, logs doesn't show anything useful (I have clicked "Load newer logs" many times already, this is the latest...)
Express.js and nuxt-sass-resources-loader must be included in package.json.
.e.g.)
package.json
"dependencies": {
"express": "^4.16.3",
"nuxt-sass-resources-loader": "^2.0.3"
},
Otherwise, Express.js will not be installed on the GAE.
It seems that it worked because you already installed Express.js in your local environment.
I started a new react project using create-react-app boilerplate (https://github.com/facebook/create-react-app), and I'm getting the following error when trying to start the app, the reason is that I have created a folder called 'containers' where all the containers go, and I want to create an index file to export all of them from that directory, this way I can just reference the directory in order to import de components.
Like this:
import UserContainer from './containers/UserContainer'; //This work(but ugly)
import { UserContainer } from './containers'; // This does not work
Basically this is the content of my index.js file inside the containers folder:
export UserContainer from './UserContainer';
And I'm getting the error Syntax error: Unexpected token, expected { (1:7),
this is the content of my package.json:
{
"name": "user-management1",
"version": "0.1.0",
"private": true,
"dependencies": {
"install": "^0.11.0",
"npm": "^6.0.0",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-redux": "^4.2.1",
"react-router-dom": "^4.2.2",
"react-router-redux": "^5.0.0-alpha.4",
"react-scripts": "1.1.4",
"redux": "^3.5.2"
},
"scripts": {
"lint": "eslint src",
"lint:fix": "npm run lint -- --fix",
"lint:css": "stylelint \"src/**/*.{css,less,scss,sss}\"",
"start": "npm run lint:fix && react-scripts start & npm run apiserver",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"apiserver": "json-server --watch --port 4000 api/db.json"
},
"devDependencies": {
"bulma": "^0.7.1",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^14.1.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-css-modules": "^2.7.1",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^6.10.3",
"json-server": "^0.12.2"
}
}
I start the app using 'react-scripts'. The problem seems related to babel?, do I need to start the app using babel-node?, or add any presets anywhere? I thought using this boilerplate babel was already configured to start coding in ES6.
Please help
You are basically re-exporting a module (that is adding another module’s exports to those of the current module). In order to make the named export UserContainer of module ./UserContainer the default export of current module you should write:
export { default as UserContainer } from './UserContainer'
Check this link for a complete reference