I am testing a Vue3 project with Jest and I am facing this issue: I recently added Jest to my Vue project through the command vue add unit-jest. This command configured the environment to run unit tests with the command npm run test:unit, which refers to vue-cli-service test:unit.
I've also configured Jest in my package.json file with options "collectCoverage":true and "collectCoverageFrom":["src/views/**.{js,vue}","!src/main.js"].
However, when I run the tests, I don't get a coverage report from all of my Vue components, only some of them. These components are located in src/views folder of my project.
This is my package.json file:
{
"name": "proyecto-tfg",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "webpack --mode production",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint",
"webpack": "webpack --watch --mode development"
},
"dependencies": {
"#vue/test-utils": "^2.0.2",
"#vuelidate/core": "^2.0.0-alpha.41",
"#vuelidate/validators": "^2.0.0-alpha.29",
"babel-preset-es2015": "^6.24.1",
"body-parser": "^1.20.0",
"bootstrap": "^5.1.3",
"bootstrap-vue": "^2.22.0",
"chart.js": "^3.8.2",
"cookie-parser": "^1.4.6",
"core-js": "^3.22.8",
"cors": "^2.8.5",
"dotenv": "^16.0.1",
"error-stack-parser": "^2.1.4",
"express": "^4.18.1",
"express-session": "^1.17.3",
"flush-promises": "^1.0.2",
"jest-fetch-mock": "^3.0.3",
"jsonwebtoken": "^8.5.1",
"moment": "^2.29.3",
"mongoose": "^6.3.6",
"mongoose-unique-validator": "^3.1.0",
"morgan": "^1.10.0",
"nodemon": "^2.0.16",
"vue": "^3.2.37",
"vue-chartjs": "^4.1.1",
"vue-ellipse-progress": "^2.1.1",
"vue-material-design-icons": "^5.1.1",
"vue-router": "^4.0.16",
"vue-star-rating": "^2.1.0",
"vue-toastification": "^2.0.0-rc.5",
"vue3-carousel": "^0.1.40"
},
"devDependencies": {
"#babel/core": "^7.18.10",
"#babel/eslint-parser": "^7.18.2",
"#babel/plugin-syntax-jsx": "^7.18.6",
"#babel/preset-env": "^7.18.10",
"#babel/preset-react": "^7.18.6",
"#vue/babel-preset-jsx": "^1.3.1",
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-eslint": "~5.0.0",
"#vue/cli-plugin-unit-jest": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"#vue/test-utils": "^2.0.0-0",
"#vue/vue3-jest": "^28.0.1",
"babel-jest": "^28.1.3",
"babel-loader": "^8.2.5",
"babel-preset-env": "^1.7.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.7.1",
"jest": "^28.1.3",
"vue-loader": "^17.0.0",
"vue-template-compiler": "^2.6.14",
"webpack": "^5.73.0",
"webpack-cli": "^4.9.2"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "#babel/eslint-parser"
},
"rules": {
"vue/multi-word-component-names": 0,
"vue/require-v-for-key": 0
},
"overrides": [
{
"files": [
"**/__tests__/*.{j,t}s?(x)",
"**/tests/unit/**/*.spec.{j,t}s?(x)"
],
"env": {
"jest": true
}
}
]
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
],
"jest": {
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"moduleDirectories": [
"node_modules",
"src/views"
],
"automock": false,
"setupFiles": [
"./tests/setupJest.js"
],
"collectCoverage": true,
"collectCoverageFrom": [
"src/views/**.{js,vue}",
"!src/main.js"
],
"preset": "#vue/cli-plugin-unit-jest"
}
}
This is the complete list of my Vue components:
- ActorShow.vue
- AddProgramaLista.vue
- Buscador.vue
- CrearLista.vue
- Estadisticas.vue
- Filtros.vue
- Footer.vue
- Home.vue
- Insignias.vue
- InsigniasShow.vue
- Listas.vue
- Login.vue
- Navbar.vue
- Perfil.vue
- Programas.vue
- ProgramasShow.vue
- RecomendacionesUsuario.vue
- Registro.vue
- Sugerencias.vue
And when I run the command npm run test:unit, I get the message "Running coverage on untested files..." with this output from the console:
Thanks in advance
Related
Heap Out of Memory error while starting the application. I have listed my package.json file content which might be needed for proper detailing. Although I set max_old_space_size to 4096, it still provides me the same error. My Pc configuration is 4GB RAM and I5 intel processor. Is it due to my pc configuration or memory leaks in the code. Please elaborate the possible fix for the issue. I face this issue when I use sass in my dev dependencies.
"name": "superadmin-panel",
"version": "0.1.0",
"private": true,
"license": "MIT",
"dependencies": {
"#ant-design/icons": "4.6.2",
"#auth0/auth0-react": "^1.4.0",
"#david.kucsai/react-pdf-table": "^0.4.1",
"#react-pdf/renderer": "^2.1.1",
"#welldone-software/why-did-you-render": "^6.1.1",
"antd": "^4.15.0",
"antd-img-crop": "^3.14.1",
"apexcharts": "^3.26.0",
"axios": "^0.21.1",
"bootstrap-scss": "^4.6.0",
"chart.js": "^3.0.2",
"chartist": "^0.11.4",
"connected-react-router": "^6.9.1",
"draft-convert": "^2.1.11",
"draft-js": "^0.11.7",
"draftjs-to-html": "^0.9.1",
"emoji-mart": "^3.0.1",
"feather-icons": "^4.28.0",
"firebase": "^8.3.3",
"html-to-draftjs": "^1.5.0",
"jquery": "^3.6.0",
"leaflet": "^1.7.1",
"node-sass": "npm:sass#^1.52.3",
"react-apexcharts": "^1.3.7",
"react-bootstrap": "^1.5.2",
"react-bootstrap-typeahead": "^5.1.4",
"react-chartist": "^0.14.4",
"react-ckeditor-component": "^1.1.0",
"react-clock": "^3.0.0",
"react-copy-to-clipboard": "^5.0.3",
"react-countdown": "^2.3.1",
"react-countup": "^4.3.3",
"react-data-table-component": "^6.11.7",
"react-datepicker": "^3.7.0",
"react-draft-wysiwyg": "^1.14.5",
"react-dropzone-uploader": "^2.11.0",
"react-feather": "^2.0.9",
"react-google-maps": "^9.4.5",
"react-hook-form": "^6.15.4",
"react-icons": "^4.2.0",
"react-image-crop": "^8.6.6",
"react-image-lightbox": "^5.1.1",
"react-input-range": "^1.3.0",
"react-jwt": "^1.1.2",
"react-moment": "^1.1.1",
"react-redux": "^7.2.3",
"react-router-dom": "^5.2.0",
"react-router-redux": "^4.0.8",
"react-scripts": "^4.0.3",
"react-slick": "^0.28.1",
"react-slugify": "^2.1.0",
"react-spinners": "^0.11.0",
"react-switch-lang": "^1.0.2",
"react-times": "^3.1.12",
"react-toastify": "^7.0.3",
"react-transition-group": "^4.4.1",
"reactstrap": "^8.9.0",
"redux": "^4.0.5",
"redux-saga": "^1.1.3",
"sweetalert2": "^10.16.0",
"swr": "^1.2.2",
"uuid": "^8.3.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md}' --config ./src/.prettierrc"
},
"resolutions": {
"react-dev-utils": "^10.0.0"
},
"eslintConfig": {
"extends": "react-app",
"plugins": [
"jsx-a11y"
],
"rules": {
"no-whitespace-before-property": "off"
},
"overrides": [
{
"files": [
"*-index.js"
],
"rules": {
"no-unused-expressions": "off"
}
}
],
"reportUnusedDisableDirectives": true,
"noInlineConfig": true
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"env-cmd": "^10.1.0",
"rc-tween-one": "^3.0.6",
"react-app-rewired": "^2.1.8",
"redux-devtools-extension": "^2.13.9",
"sass": "^1.52.3",
"typescript": "^4.2.3"
},
"husky": {
"hooks": {
"pre-commit": "npx run format",
"pre-push": "npx run format"
}
},
"engines": {
"npm": ">=6.0.0",
"node": ">=14.0.0"
}
}
For context, our project is a Next.JS project with mostly JavaScript files, and a few scattering of random TypeScript Files, mostly in our API folder. Recently we set up Husky to pre-commit our git commits, and some of the settings changed and while next lint correctly lints, and our Husky settings work with both types of files, the VSCode extension for EsLint no longer works on JavaScript files. While removing plugin:#typescript-eslint/recommended fixes that issue, next lint and husky then fails with TS files.
eslintrc.json:
{
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:prettier/recommended",
"plugin:#next/next/recommended",
"plugin:import/recommended",
"prettier",
"plugin:#typescript-eslint/recommended"
],
"settings": {
"react": {
"version": "detect"
},
"import/resolver": {
"typescript": {}
}
},
"plugins": ["react", "prettier"],
"rules": {
"react/prop-types": 0,
"react/react-in-jsx-scope": "off",
"react/display-name": "off",
"no-unused-vars": 2,
"no-undef": 2,
"import/order": [
"error",
{
"groups": ["builtin", "external", "internal"],
"pathGroups": [
{
"pattern": "react",
"group": "external",
"position": "before"
},
{
"pattern": "next/*",
"group": "external",
"position": "before"
}
],
"pathGroupsExcludedImportTypes": ["react", "next/*"],
"alphabetize": {
"order": "asc",
"caseInsensitive": true
}
}
],
"prettier/prettier": [
"error",
{
"endOfLine": "auto"
}
]
},
"globals": {
"React": "writable"
},
"env": {
"browser": true,
"node": true,
"es6": true,
"jest": true
},
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
}
}
package.json:
{
"name": "our-organization",
"version": "2.0.0",
"private": true,
"scripts": {
"dev": "next dev && next export",
"build": "next build",
"start": "NODE_ENV=production next start -p 8080",
"lint": "next lint",
"prettier-fix": "prettier --write .",
"find:unused": "npx next-unused",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
"test": "jest --json --outputFile=./test-results/report.json",
"prepare": "husky install"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"**/*.{js,jsx,ts,tsx}": [
"next lint .",
"prettier --write ."
]
},
"dependencies": {
"#analytics/google-analytics": "^0.5.2",
"#apollo/client": "^3.4.15",
"#contentful/rich-text-plain-text-renderer": "^15.6.2",
"#contentful/rich-text-react-renderer": "^15.3.6",
"#emotion/cache": "^11.5.0",
"#emotion/react": "^11.5.0",
"#emotion/server": "^11.4.0",
"#emotion/styled": "^11.3.0",
"#mui/icons-material": "^5.0.1",
"#mui/lab": "^5.0.0-alpha.48",
"#mui/material": "^5.0.3",
"#mui/styles": "^5.0.1",
"#mui/x-data-grid": "^5.0.1",
"#testing-library/user-event": "^13.2.1",
"algoliasearch": "^4.10.5",
"analytics": "^0.7.14",
"apollo-link-rest": "^0.8.0-beta.0",
"bad-words": "^3.0.4",
"contentful": "^9.0.0",
"date-fns": "^2.25.0",
"dateformat": "^4.5.1",
"formik": "^2.2.9",
"graphql": "^15.6.0",
"graphql-anywhere": "^4.2.7",
"javascript-time-ago": "^2.3.8",
"next": "^11.1.2",
"next-instantsearch": "^0.3.15",
"qs": "^6.10.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-iframe": "^1.8.0",
"react-instantsearch-dom": "^6.22.0",
"react-markdown": "^7.0.1",
"react-player": "^2.9.0",
"react-scripts": "^5.0.0",
"react-share": "^4.4.0",
"react-show-more-text": "^1.5.0",
"react-to-print": "^2.13.0",
"serverless-mysql": "^1.5.4",
"sharethis-reactjs": "^1.6.0",
"swr": "^1.0.1",
"universal-cookie": "^4.0.4",
"yup": "^0.32.9"
},
"devDependencies": {
"#babel/core": "^7.15.5",
"#babel/plugin-proposal-export-default-from": "^7.14.5",
"#next/eslint-plugin-next": "^11.1.2",
"#storybook/addon-actions": "^6.3.10",
"#storybook/addon-essentials": "^6.3.10",
"#storybook/addon-jest": "^6.3.10",
"#storybook/addon-links": "^6.3.10",
"#storybook/react": "^6.3.10",
"#testing-library/dom": "^8.5.0",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^12.1.0",
"#typescript-eslint/eslint-plugin": "^5.11.0",
"babel-jest": "^27.2.0",
"babel-loader": "^8.2.2",
"babel-plugin-react-require": "^3.1.3",
"eslint": "^7.32.0",
"eslint-config-next": "^12.0.10",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.24.2",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.25.1",
"husky": "^7.0.4",
"jest": "^27.2.0",
"jest-html-reporters": "^2.1.6",
"jest-transform-graphql": "^2.1.0",
"lint-staged": "^12.1.2",
"prettier": "^2.4.0",
"tsconfig-paths-webpack-plugin": "^3.5.1",
"typescript": "^4.4.3"
},
"engines": {
"node": ">=14.17.0",
"npm": ">=6.0.0"
}
}
I have found no good resources on addressing this issue for mixed projects like this. I do not know why we have typescript files as they were added before I joined.
This eslint file is missing the typescript parser:
"parser": "#typescript-eslint/parser",
I'm trying to build a .exe file of my VueJS project.
For that, I want to use Electron and electron-packager.
I'm facing some issues when launching the .exe app created with the command : electron-packager . --all. The first one was:
I found on the internet that I had to add "type":"module" and "module":"es2015" in my package.json file. I added it and then I have another problem which is:
I really don't know what to do with this.
Here is my package.json file:
{
"name": "hihihihi",
"version": "0.1.0",
"type":"module",
"module":"es2015",
"description": "hihihihi",
"author": "Hihihi Hihihi <hihi.hihi#hihi.com>",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"electron:build": "vue-cli-service electron:build",
"electron:serve": "vue-cli-service electron:serve",
"postinstall": "electron-builder install-app-deps",
"postuninstall": "electron-builder install-app-deps"
},
"main": "src/background.js",
"dependencies": {
"#mdi/js": "^5.9.55",
"core-js": "^3.6.5",
"nedb": "^1.8.0",
"vue": "^2.6.11",
"vue-router": "^3.5.1",
"vuetify": "^2.5.2",
"vuex": "^3.6.2"
},
"devDependencies": {
"#nuxtjs/vuetify": "^1.11.3",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"deepmerge": "^1.5.2",
"electron": "^13.0.0",
"electron-devtools-installer": "^3.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.34.0",
"sass-loader": "^10.2.0",
"vue-cli-plugin-electron-builder": "~2.1.1",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
When I run rm -rf src/dist && yarn build && electron-builder build --publish never on git bash on windows, to package my electron/react app, I get the following error message:
ERROR in ./src/pages/Task.js 135:4
[1] Module parse failed: Unexpected token (135:4)
[1] You may need an appropriate loader to handle this file type, currently no lo
aders are configured to process this file. See https://webpack.js.org/concepts#l
oaders
[1] |
[1] | return (
[1] > <div className={`Task ${isMinimized ? 'FlexIt' : ''}`}>
[1] | <div className="Btns">
[1] | <img
[1] # ./src/App.tsx 11:0-32 26:13-17
[1] # ./src/index.tsx 7:0-24 8:26-29
[1]
[1] webpack 5.5.1 compiled with 4 errors in 12401 ms
Any ideas about the reason? This is my 1st electron app, and 2nd react app, and I don't really know what webpack is.
My package.json file:
{
"name": "my-app",
"productName": "myApp",
"description": "Electron react app",
"scripts": {
"build": "concurrently \"yarn build:main\" \"yarn build:renderer\"",
"build:main": "cross-env NODE_ENV=production webpack --config ./.erb/configs/webpack.config.main.prod.babel.js",
"build:renderer": "cross-env NODE_ENV=production webpack --config ./.erb/configs/webpack.config.renderer.prod.babel.js",
"rebuild": "electron-rebuild --parallel --types prod,dev,optional --module-dir src",
"lint": "cross-env NODE_ENV=development eslint . --cache --ext .js,.jsx,.ts,.tsx",
"package": "rm -rf src/dist && yarn build && electron-builder build --publish never",
"postinstall": "node -r #babel/register .erb/scripts/CheckNativeDep.js && electron-builder install-app-deps && yarn cross-env NODE_ENV=development webpack --config ./.erb/configs/webpack.config.renderer.dev.dll.babel.js && opencollective-postinstall && yarn-deduplicate yarn.lock",
"start": "node -r #babel/register ./.erb/scripts/CheckPortInUse.js && yarn start:renderer",
"start:main": "cross-env NODE_ENV=development electron -r ./.erb/scripts/BabelRegister ./src/main.dev.ts",
"start:renderer": "cross-env NODE_ENV=development webpack serve --config ./.erb/configs/webpack.config.renderer.dev.babel.js",
"test": "jest"
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"cross-env NODE_ENV=development eslint --cache"
],
"{*.json,.{babelrc,eslintrc,prettierrc}}": [
"prettier --ignore-path .eslintignore --parser json --write"
],
"*.{css,scss}": [
"prettier --ignore-path .eslintignore --single-quote --write"
],
"*.{html,md,yml}": [
"prettier --ignore-path .eslintignore --single-quote --write"
]
},
"build": {
"productName": "ElectronReact",
"appId": "org.erb.ElectronReact",
"files": [
"dist/",
"node_modules/",
"index.html",
"main.prod.js",
"main.prod.js.map",
"package.json"
],
"afterSign": ".erb/scripts/Notarize.js",
"mac": {
"target": [
"dmg"
],
"type": "distribution",
"hardenedRuntime": true,
"entitlements": "assets/entitlements.mac.plist",
"entitlementsInherit": "assets/entitlements.mac.plist",
"gatekeeperAssess": false
},
"dmg": {
"contents": [
{
"x": 130,
"y": 220
},
{
"x": 410,
"y": 220,
"type": "link",
"path": "/Applications"
}
]
},
"win": {
"target": [
"nsis"
]
},
"linux": {
"target": [
"AppImage"
],
"category": "Development"
},
"directories": {
"app": "src",
"buildResources": "assets",
"output": "release"
},
"extraResources": [
"./assets/**"
],
"publish": {
"provider": "github",
"owner": "someone",
"repo": "someone"
}
},
"repository": {
"type": "git",
"url": "link.git"
},
"author": {
"name": "someone",
"email": "someone#someone.com"
},
"contributors": [
{
"name": "someone",
"email": "someone#someone.com"
}
],
"license": "MIT",
"bugs": {
"url": "https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues"
},
"keywords": [
"electron",
"boilerplate",
"react",
"typescript",
"ts",
"sass",
"webpack",
"hot",
"reload"
],
"homepage": "https://github.com/electron-react-boilerplate/electron-react-boilerplate#readme",
"jest": {
"testURL": "http://localhost/",
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/.erb/mocks/fileMock.js",
"\\.(css|less|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"js",
"jsx",
"ts",
"tsx",
"json"
],
"moduleDirectories": [
"node_modules",
"src/node_modules"
],
"setupFiles": [
"./.erb/scripts/CheckBuildsExist.js"
]
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/plugin-proposal-class-properties": "^7.12.1",
"#babel/plugin-proposal-decorators": "^7.12.1",
"#babel/plugin-proposal-do-expressions": "^7.12.1",
"#babel/plugin-proposal-export-default-from": "^7.12.1",
"#babel/plugin-proposal-export-namespace-from": "^7.12.1",
"#babel/plugin-proposal-function-bind": "^7.12.1",
"#babel/plugin-proposal-function-sent": "^7.12.1",
"#babel/plugin-proposal-json-strings": "^7.12.1",
"#babel/plugin-proposal-logical-assignment-operators": "^7.12.1",
"#babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
"#babel/plugin-proposal-optional-chaining": "^7.12.7",
"#babel/plugin-proposal-pipeline-operator": "^7.12.1",
"#babel/plugin-proposal-throw-expressions": "^7.12.1",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-syntax-import-meta": "^7.10.4",
"#babel/plugin-transform-react-constant-elements": "^7.12.1",
"#babel/plugin-transform-react-inline-elements": "^7.12.1",
"#babel/plugin-transform-runtime": "^7.12.1",
"#babel/preset-env": "^7.12.7",
"#babel/preset-react": "^7.12.7",
"#babel/preset-typescript": "^7.12.7",
"#babel/register": "^7.12.1",
"#pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
"#teamsupercell/typings-for-css-modules-loader": "^2.4.0",
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.2",
"#types/enzyme": "^3.10.5",
"#types/enzyme-adapter-react-16": "^1.0.6",
"#types/history": "4.7.6",
"#types/jest": "^26.0.15",
"#types/node": "14.14.10",
"#types/react": "^16.9.44",
"#types/react-dom": "^16.9.9",
"#types/react-router-dom": "^5.1.6",
"#types/react-test-renderer": "^16.9.3",
"#types/webpack-env": "^1.15.2",
"#typescript-eslint/eslint-plugin": "^4.22.0",
"#typescript-eslint/parser": "^4.22.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.1.0",
"babel-loader": "^8.2.2",
"babel-plugin-dev-expression": "^0.2.2",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"browserslist-config-erb": "^0.0.1",
"chalk": "^4.1.0",
"concurrently": "^5.3.0",
"core-js": "^3.6.5",
"cross-env": "^7.0.2",
"css-loader": "^5.0.1",
"css-minimizer-webpack-plugin": "^1.1.5",
"detect-port": "^1.3.0",
"electron": "^11.0.1",
"electron-builder": "^22.10.5",
"electron-devtools-installer": "^3.1.1",
"electron-notarize": "^1.0.0",
"electron-rebuild": "^2.3.2",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.3",
"enzyme-to-json": "^3.5.0",
"eslint": "^7.25.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-airbnb-typescript": "^12.0.0",
"eslint-config-erb": "^2.0.0",
"eslint-config-prettier": "^6.11.0",
"eslint-import-resolver-webpack": "^0.13.0",
"eslint-plugin-compat": "^3.8.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jest": "^24.1.3",
"eslint-plugin-jsx-a11y": "6.4.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.23.2",
"eslint-plugin-react-hooks": "^4.0.8",
"file-loader": "^6.0.0",
"husky": "^4.2.5",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.1.0",
"lint-staged": "^10.2.11",
"mini-css-extract-plugin": "^1.3.1",
"node-sass": "^5.0.0",
"opencollective-postinstall": "^2.0.3",
"prettier": "^2.0.5",
"react-refresh": "^0.9.0",
"react-test-renderer": "^17.0.1",
"rimraf": "^3.0.0",
"sass-loader": "^10.1.0",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.0.3",
"typescript": "^4.0.5",
"url-loader": "^4.1.0",
"webpack": "^5.5.1",
"webpack-bundle-analyzer": "^4.1.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.4.0",
"yarn-deduplicate": "^3.1.0"
},
"dependencies": {
"#material-ui/icons": "^4.11.2",
"electron-debug": "^3.1.0",
"electron-log": "^4.2.4",
"electron-updater": "^4.3.4",
"history": "^5.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^4.3.1",
"regenerator-runtime": "^0.13.5",
"source-map-support": "^0.5.19"
},
"devEngines": {
"node": ">=10.x",
"npm": ">=6.x",
"yarn": ">=1.21.3"
},
"collective": {
"url": "https://opencollective.com/electron-react-boilerplate-594"
},
"browserslist": [],
"prettier": {
"overrides": [
{
"files": [
".prettierrc",
".babelrc",
".eslintrc"
],
"options": {
"parser": "json"
}
}
],
"singleQuote": true
},
"renovate": {
"extends": [
"bliss"
],
"baseBranches": [
"next"
]
},
"husky": {
"hooks": {}
}
}
My webpack.config.base.js file:
/**
* Base webpack config used across other specific configs
*/
import path from 'path';
import webpack from 'webpack';
import { dependencies as externals } from '../../src/package.json';
export default {
externals: [...Object.keys(externals || {})],
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
},
},
],
},
output: {
path: path.join(__dirname, '../../src'),
// https://github.com/webpack/webpack/issues/1114
libraryTarget: 'commonjs2',
},
/**
* Determine the array of extensions that should be used to resolve modules.
*/
resolve: {
extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
modules: [path.join(__dirname, '../../src'), 'node_modules'],
},
plugins: [
new webpack.EnvironmentPlugin({
NODE_ENV: 'production',
}),
],
};
I want to set up a testing environnement for my react app using Mocha+chai+enzyme , the problem is that , many things are missing and i don't know how to fix that since i am a beginner when it comes to use babel or webpack ... etc
So first of all , i have a project that i created with create-react-app
i installed all the libraries with npm
we already have a default app.test.js file , so i just changed the code
My package.json:
{
"name": "****",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/core": "7.1.0",
"#svgr/webpack": "2.4.1",
"#types/react": "^16.7.20",
"#types/react-dom": "^16.0.11",
"apollo-boost": "^0.1.23",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "9.0.0",
"babel-jest": "23.6.0",
"babel-loader": "8.0.4",
"babel-plugin-named-asset-import": "^0.2.3",
"babel-preset-react-app": "^6.1.0",
"bfj": "6.1.1",
"case-sensitive-paths-webpack-plugin": "2.1.2",
"chalk": "2.4.1",
"css-loader": "1.0.0",
"dotenv": "6.0.0",
"dotenv-expand": "4.2.0",
"eslint": "5.6.0",
"eslint-config-react-app": "^3.0.5",
"eslint-loader": "2.1.1",
"eslint-plugin-flowtype": "2.50.1",
"eslint-plugin-import": "2.14.0",
"eslint-plugin-jsx-a11y": "6.1.2",
"eslint-plugin-react": "7.11.1",
"file-loader": "2.0.0",
"fork-ts-checker-webpack-plugin-alt": "0.4.14",
"fs-extra": "7.0.0",
"graphql": "^14.0.2",
"graphql-tag": "^2.10.0",
"html-webpack-plugin": "4.0.0-alpha.2",
"identity-obj-proxy": "3.0.0",
"jest": "23.6.0",
"jest-pnp-resolver": "1.0.1",
"jest-resolve": "23.6.0",
"mini-css-extract-plugin": "0.4.3",
"optimize-css-assets-webpack-plugin": "5.0.1",
"pnp-webpack-plugin": "1.1.0",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-preset-env": "6.0.6",
"postcss-safe-parser": "4.0.1",
"react": "^16.7.0",
"react-apollo": "^2.3.3",
"react-app-polyfill": "^0.1.3",
"react-dev-utils": "^6.1.1",
"react-dom": "^16.7.0",
"resolve": "1.8.1",
"sass-loader": "7.1.0",
"style-loader": "0.23.0",
"terser-webpack-plugin": "1.1.0",
"url-loader": "1.1.1",
"webpack": "4.19.1",
"webpack-dev-server": "^3.1.14",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "3.6.3"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "mocha src/App.test.js"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
"resolver": "jest-pnp-resolver",
"setupFiles": [
"react-app-polyfill/jsdom"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
],
"testEnvironment": "jsdom",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
]
},
"babel": {
"presets": [
"react-app"
]
},
"devDependencies": {
"#babel/preset-env": "^7.3.1",
"#babel/preset-react": "^7.0.0",
"#babel/preset-stage-0": "^7.0.0",
"awesome-typescript-loader": "^5.2.1",
"babel-preset-env": "^1.7.0",
"chai": "^4.2.0",
"enzyme": "^3.8.0",
"enzyme-adapter-react-16": "^1.9.1",
"jsdom": "^13.2.0",
"mocha": "^5.2.0",
"react-addons-test-utils": "^15.6.2",
"source-map-loader": "^0.2.4",
"typescript": "^3.2.2"
}
}
My App.test.js
import React from 'react';
import { configure , shallow } from 'enzyme'
import { expect } from 'chai'
import Adapter from 'enzyme-adapter-react-16'
configure({ adapter: new Adapter() });
import App from './App';
describe('App', function() {
it('should work', function() {
const wrapper = shallow(<App />)
expect('1').to.equal('1');
})
});
And my .babelrc : some people told me to install these presets but same problem
{
"presets": ["#babel/preset-react", "#babel/preset-env"]
}
when i run npm test : i have this :
C:\Users\kino96\Desktop\JavaScript\OurFirstProject\src\App.test.js:1
(function (exports, require, module, __filename, __dirname) { import
React from 'react';
SyntaxError: Unexpected identifier
at new Script (vm.js:79:7)
at createScript (vm.js:251:10)
...
You need to tell Mocha that it should use Babel for your test files. The documentation (here) seems to be out of date, but this should work:
"devDependencies": {
...
"#babel/register"
},
"scripts": {
...
"test": "mocha --require #babel/register src/App.test.js"
}