How do I connect React component to cucumber.js? - javascript

I want to run React in Cucumberjs
I have made a Word class where I connected the App compnent
import { setWorldConstructor } from 'cucumber'
import {render } from '#testing-library/react'
import React from 'react'
import App from '../../App'
class AppWorld {
constructor () {
let {queryByText,queryByLabelText,queryByTestId} = render(<App/>)
this._queryByText = queryByText
this._queryByLabelText = queryByLabelText
this._gueryByTestId = queryByTestId
}
getQueryByText() {
return this._queryByText
}
getQueryByLabelText() {
return this._queryByLableText
}
getQueryByTestId() {
return this._queryByTestId
}
}
setWorldConstructor(AppWorld);
I also made a config file cucumber js
module.exports = {
default: [
'src/features/**/*.feature',
'--require ./features/worlds/AppWorld.js',
'--require ./features/support/index.js',
'--require src/features/**/*.js',
'--require-module #babel/register'
].join(' '),
};
> The package.json is
"name": "todofrontenf",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/preset-env": "^7.11.0",
"#babel/preset-react": "^7.10.4",
"bootstrap": "^4.5.0",
"dotenv": "^8.2.0",
"jest-fetch-mock": "^3.0.3",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "^3.4.1",
"use-react-router": "^1.0.7",
"winston": "^3.3.3",
"winston-elasticsearch": "^0.7.12"
},
"scripts": {
"start:devsource": "DOTENV_CONFIG_BACKEND_URL=http://localhost:8080 node -r dotenv/config ./node_modules/react-scripts/bin/react-scripts.js start",
"start:devbuild": "PORT=9000 node -r dotenv/config server.js dotenv_config_path=.env.dev",
"prestart": "npm build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"cucumber": "./node_modules/.bin/cucumber-js src/features/**/*.feature --require=src/features/**/*.js --require-module #babel/register",
"test:build": "node -r dotenv/config ./node_modules/react-scripts/bin/react-scripts.js test ./src dotenv_config_path=.env.build",
"test:dev": "node -r dotenv/config ./node_modules/react-scripts/bin/react-scripts.js test ./src dotenv_config_path=.env.dev",
"test:test": "node -r dotenv/config ./node_modules/react-scripts/bin/react-scripts.js test ./src dotenv_config_path=.env.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"
]
},
"devDependencies": {
"#babel/register": "^7.10.5",
"#reportportal/agent-js-jest": "^5.0.1",
"#testing-library/jest-dom": "^5.11.0",
"#testing-library/react": "^10.4.6",
"cucumber": "^6.0.5",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"jest-sonar-reporter": "^2.0.0"
}
}
I recive following message when I execute the npm run cucumber
Steins-MacBook-Air:todofrontend steinkorsveien$ npm run cucumber
> todofrontenf#0.1.0 cucumber /Users/steinkorsveien/Development/todo/todofrontend
> cucumber-js src/features/**/*.feature --require=src/features/**/*.js --require-module #babel/register
ReferenceError: document is not defined
at render (/Users/steinkorsveien/Development/todo/todofrontend/node_modules/#testing-library/react/dist/pure.js:82:5)
at new AppWorld (/Users/steinkorsveien/Development/todo/todofrontend/src/features/worlds/AppWorld.js:11:60)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! todofrontenf#0.1.0 cucumber: `cucumber-js src/features/**/*.feature --require=src/features/**/*.js --require-module #babel/register`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the todofrontenf#0.1.0 cucumber script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
How should I configure Cucumberjs to test React?

You need to register JSDOM so that #testing-library/react has a DOM to render the component to.
Firstly
npm install jsdom-global
Then, add this to your cucumber.js file
--require-module jsdom-global/register

Related

Pact JS Provider: how to run consumer tests used in PACT workshop when returning 'Unrecognized CLI Parameter'

The tests were working on my Windows desktop, but they keep failing on this macbook. I cloned this repository and when I try to run the tests I receive this error:
$ npm run test:pact --prefix consumer
> consumer#0.1.0 pretest:pact
> rimraf pacts/*.json
> consumer#0.1.0 test:pact
> CI=true react-scripts test --testTimeout=30000 pact.spec.js
● Unrecognized CLI Parameter:
Unrecognized option "testTimeout".
CLI Options Documentation:
https://jestjs.io/docs/en/cli.html
The package.json file:
{
"name": "consumer",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"spectre.css": "^0.5.8",
"web-vitals": "^2.1.4"
},
"devDependencies": {
"#pact-foundation/pact": "^10.0.0-beta.62",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"nock": "^11.7.2",
"rimraf": "^3.0.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "CI=true react-scripts test",
"eject": "react-scripts eject",
"pretest:pact": "rimraf pacts/*.json",
"test:pact": "CI=true react-scripts test --testTimeout=30000 pact.spec.js"
},
"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"
]
}
}
If I try to run the consumer tests locally, I got this:
$ npm run test
> consumer#0.1.0 test
> CI=true react-scripts test
PASS src/api.spec.js
FAIL src/api.pact.spec.js
● Test suite failed to run
TypeError: Cannot read properties of undefined (reading 'enabled')
1 | import path from "path";
> 2 | import {
| ^
3 | PactV3,
4 | MatchersV3,
5 | SpecificationVersion,
at Object.<anonymous> (node_modules/pino-pretty/index.js:28:30)
at getPrettyStream (node_modules/pino/lib/tools.js:183:27)
at normalizeArgs (node_modules/pino/lib/tools.js:352:16)
at pino (node_modules/pino/pino.js:78:28)
at Object.createLogger (node_modules/#pact-foundation/pact-core/src/logger/pino.ts:5:3)
at Object.<anonymous> (node_modules/#pact-foundation/pact-core/src/logger/index.ts:10:14)
at Object.<anonymous> (node_modules/#pact-foundation/pact-core/src/service.ts:4:1)
at Object.<anonymous> (node_modules/#pact-foundation/pact-core/src/server.ts:1:1)
at Object.<anonymous> (node_modules/#pact-foundation/pact-core/src/pact.ts:2:1)
at Object.<anonymous> (node_modules/#pact-foundation/pact-core/src/index.ts:1:1)
at Object.<anonymous> (node_modules/#pact-foundation/src/httpPact/index.ts:2:1)
at Object.<anonymous> (node_modules/#pact-foundation/src/index.ts:25:1)
at Object.<anonymous> (src/api.pact.spec.js:2:1)
Test Suites: 1 failed, 1 passed, 2 total
Tests: 2 passed, 2 total
Snapshots: 0 total
Time: 2.274s
Ran all test suites.
It does not run the pact tests from the consumer side.
Already tried a lot of different things, removing 'CI=true' in the package.json, removing the timeout, nothing seems to work it out. Although, the tests on the provider side are running correcly

webpack path-browserify polyfill failing

I'm migrating a mono-repo app from react-scripts v4 to react-scripts v5. The app uses npm workspaces and has a structure as below
AppName
|_ julia_project_files
|_node_modules (one)
|_ react_app
|_node_modules (two)
|_src
|_package.json(two)
|_ config_overides.js
|_package.json (one)
The app leverages multiple node.js libraries which break with webpack 5 (no inbuilt node.js polyfill support) and I had errors similar to this. I leveraged this solution to fix all errors except one
Module not found: Error: You attempted to import /Computer/AppName/node_modules/path-browserify/index.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
I don't see where I'm going wrong?
files
config-overrides.js
const webpack = require('webpack');
module.exports = function override(config, env) {
config.resolve.fallback = {
url: require.resolve('url'),
crypto: require.resolve('crypto-browserify'),
path: require.resolve("path-browserify"),
http: require.resolve('stream-http'),
https: require.resolve('https-browserify'),
buffer: require.resolve('buffer'),
stream: require.resolve('stream-browserify'),
};
config.plugins.push(
new webpack.ProvidePlugin({
process: 'process/browser',
Buffer: ['buffer', 'Buffer'],
}),
);
return config;
}
package.json (one)
{
...some stuff,
"private": true,
"version": "1.0.0",
"main": "index.js",
"workspaces": [
"react-app",
"packages/*"
],
"scripts": {
"start-server": "julia --threads=auto --project=../julia-api -e",
"start-client": "cd react-app && npm run start-web",
"lint-fix-client": "cd react-app && npm run lint-fix",
"prepare": "husky install"
},
"devDependencies": {
"#types/jest": "^26.0.21",
"husky": "^7.0.4"
},
"dependencies": {
"path-browserify": "^1.0.1"
}
}
package.json (two)
{
"dependencies": {
... alot of non-related dependencies
"https-browserify": "^1.0.0",
// "path-browserify": "^1.0.1", I've tried installing it here too
"react": "^17.0.2",
"react-app-rewired": "^2.2.1",
"react-beautiful-dnd": "^13.1.0",
"react-dom": "^17.0.2",
"react-json-tree": "^0.15.0",
"react-scripts": "5.0.0",
"stream-browserify": "^3.0.0",
},
"scripts": {
"build": "SKIP_PREFLIGHT_CHECK=true react-app-rewired --max_old_space_size=4096 build",
"start": "SKIP_PREFLIGHT_CHECK=true react-app-rewired --max_old_space_size=4096 start",
"lint": "eslint src",
"lint-fix": "prettier --write './src/**/*.{js,jsx,css,json}' --config ./.prettierrc && eslint --fix src"
},
"eslintConfig": {
"extends": "react-app",
"overrides": [
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
}
]
},
"browserslist": {
"production": [
"last 1 chrome version"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://127.0.0.1:8080",
"devDependencies": {
... many dev dependencies
}
}
I've played around with where I install path-browserify be it package.json(one) or (two) and the error persists.
I found this post to be really helpful: https://namespaceit.com/blog/how-fix-breaking-change-webpack-5-used-to-include-polyfills-for-nodejs-core-modules-by-default-error.
I need polyfills for my project, so I tested solutions one and three and both worked. I wasn't able to get the fallback solution to work that I had seen in other posts, but finally found this.
We had two other packages that caused this error (besides path-browserify), and I was able to employ the same steps from solution three in the post above to get them working as well.

Error importing a package that was forked and edited in a Next.JS project

I'm using react-headroom for this project and needed to edit its code so the <header> wouldn't adjust height for pages. Therefore, I forked the original repo and made the change on my version so I could install it in my project using yarn add <my-git-repo-url> and then normally import it as any other library:
// src/components/layout.js
import { useState } from "react"
import { Box, Flex } from "#chakra-ui/react"
import Footer from "../footer"
import Header from "../header"
import Headroom from "react-headroom" // react-headroom imported here
(...)
However, I'm getting this error telling me that module was not found:
I'm not sure if there's any mistake with this process (I think not) but was unable to fix this. I ran yarn install in both ./ and ./node_modules/react-headroom with no changes at all for this result.
As #novonimo asked, here it is the module's package.json:
{
"name": "react-headroom",
"description": "Hide your header until you need it. React.js port of headroom.js",
"version": "3.2.0",
"author": "Kyle Mathews <mathews.kyle#gmail.com>",
"bugs": {
"url": "https://github.com/KyleAMathews/react-headroom/issues"
},
"dependencies": {
"prop-types": "^15.5.8",
"raf": "^3.3.0",
"shallowequal": "^1.1.0"
},
"devDependencies": {
"babel-cli": "^6.16.0",
"babel-core": "^6.17.0",
"babel-eslint": "^7.0.0",
"babel-loader": "^6.2.5",
"babel-plugin-transform-undefined-to-void": "^6.8.0",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-1": "^6.16.0",
"chai": "^3.5.0",
"eslint": "^3.8.0",
"eslint-config-airbnb": "^12.0.0",
"eslint-config-airbnb-base": "^9.0.0",
"eslint-config-prettier": "^6.13.0",
"eslint-plugin-import": "^2.0.1",
"eslint-plugin-jsx-a11y": "^2.2.3",
"eslint-plugin-react": "^6.4.1",
"mocha": "^3.1.2",
"mocha-unfunk-reporter": "^0.4.0",
"pre-commit": "^1.0.5",
"prettier": "2.1.2"
},
"directories": {
"example": "examples"
},
"homepage": "https://github.com/KyleAMathews/react-headroom",
"keywords": [
"headroom",
"react",
"react-component"
],
"license": "MIT",
"main": "dist/index.js",
"peerDependencies": {
"react": "^16.3.0 || ^17"
},
"repository": {
"type": "git",
"url": "https://github.com/KyleAMathews/react-headroom.git"
},
"scripts": {
"build": "babel --copy-files src --out-dir dist",
"test-watch": "NODE_ENV=test node_modules/.bin/mocha -w --recursive --compilers coffee:babel-core/register -R mocha-unfunk-reporter",
"unit-test": "NODE_ENV=test node_modules/.bin/mocha --recursive --compilers coffee:babel-core/register -R mocha-unfunk-reporter",
"test": "npm run unit-test && npm run lint",
"watch": "./node_modules/.bin/webpack-dev-server --hot",
"publish-patch": "npm run build && npm version patch && npm publish; git push; git push --tags",
"lint": "eslint --ignore-path .gitignore src/*",
"lint:fix": "eslint --ignore-path .gitignore . --fix",
"format": "prettier --config .prettierrc --write 'src/**/*.{js,jsx}'"
}
}
You have forgotten to build your forked library with the build command.
So, build it:
npm build
// or
yarn build
Now use it without any issues on your application:
import Headroom from "react-headroom"
Note: you need to run the above command in your forked directory not the root of your project.

getting rid of relative path react (removing "../..")

I have downloaded a react project with the following package.json :
{
"private": true,
"main": "src/index.js",
"dependencies": {
"#material-ui/core": "4.10.0",
"#material-ui/icons": "4.9.1",
"classnames": "2.2.6",
"history": "4.10.1",
"moment": "2.26.0",
"node-sass": "4.14.1",
"nouislider": "14.5.0",
"prop-types": "15.7.2",
"react": "16.13.1",
"react-datetime": "2.16.3",
"react-dom": "16.13.1",
"react-router-dom": "5.2.0",
"react-scripts": "3.4.1",
"react-slick": "0.26.1",
"react-swipeable-views": "0.13.9"
},
"devDependencies": {
"#babel/cli": "7.10.1",
"#babel/plugin-proposal-class-properties": "7.10.1",
"#babel/preset-env": "7.10.1",
"#babel/preset-react": "7.10.1",
"eslint-config-prettier": "6.11.0",
"eslint-plugin-prettier": "3.1.3",
"eslint-plugin-react": "7.20.0",
"gulp": "4.0.2",
"gulp-append-prepend": "1.0.8",
"prettier": "2.0.5"
},
"optionalDependencies": {
"typescript": "3.9.3"
},
"scripts": {
"start": "NODE_PATH=src/ react-scripts start",
"build": "react-scripts build && gulp licenses",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"lint:check": "eslint . --ext=js,jsx; exit 0",
"lint:fix": "eslint . --ext=js,jsx --fix; exit 0",
"install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
"build-package-css": "node-sass src/assets/scss/material-kit-react.scss dist/material-kit-react.css",
"build-package": "npm run build-package-css && babel src --out-dir dist",
"compile-sass": "node-sass src/assets/scss/material-kit-react.scss src/assets/css/material-kit-react.css",
"minify-sass": "node-sass src/assets/scss/material-kit-react.scss src/assets/css/material-kit-react.min.css --output-style compressed",
"map-sass": "node-sass src/assets/scss/material-kit-react.scss src/assets/css/material-kit-react.css --source-map true"
}
}
I dont know how the developer got rid of relative path in his code.
for example he imports modules like:import Header from "components/Header/Header.js";
although if I try to the same , i should do it like:import header from "../../../src/components/Header/header.js".
the link to the original github:
https://github.com/creativetimofficial/material-kit-react/
i have downloaded and installed this one , it works fine.
but when i try to copy some of the codes,it doesnt work.
use the jsconfig.json to set absolute path instead of reletive , as described in documentation
in the provided project he used
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"*": ["src/*"]
}
}
}
so he could accees all files using a absolute path , in all folder and subfolders of the project like
import file from "component/file/file.js"
In the root directory of your project, create a jsconfig.json file and save this;
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"],
"exclude": ["node_modules"]
}
If you are using eslint in your project, you'll need to add this in your .eslintrc.js file;
...
settings: {
'import/resolver': {
node: {
paths: ['src'],
},
},
},
...
You should be able to import files by their absolute path now.

React app with express server shows just blanc page

I have one page react app without routing. It works fine. Now I'm trying to host it on heroku, that's why I addded express server. I run server with 'node server/server.js', and after that i was trying to vizit http://localhost:3000 I see just blanc page without errors. I tryed to run app on heroku, but got the same result.
In page code I see just div "root" and it is empty, but inside should be rendered div "app".
My server
const path = require('path');
const express = require('express');
const app = express();
const publicPath = path.join(__dirname, '../', 'public');
const port = process.env.PORT || 3000;
app.use(express.static(publicPath));
app.get('*', (req, res) => {
res.sendFile(path.join(publicPath, 'index.html'));
});
app.listen(port, () => {
console.log('Server is up!');
});
my package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"homepage": "https://reaweapp.herokuapp.com/",
"dependencies": {
"#material-ui/core": "^4.11.0",
"#material-ui/lab": "^4.0.0-alpha.56",
"#material/textfield": "^5.1.0",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"express": "^4.17.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
"scripts": {
"start": "node server/server.js",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"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"
]
},
"devDependencies": {
"gh-pages": "^3.1.0"
}
}
my index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.register();
I think you have 1 extra dot in "../" and would need to path to the build instead:
const publicPath = path.join(__dirname, './','build');
An alternative to doing it yourself would be to use the serve package
npm i serve --save
and change scripts in package.json to
"scripts": {
"dev": "react-scripts start",
"start": "serve -s build",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"heroku-postbuild": "npm run build"
},

Categories