How to find .babelrc? - reactjs

I want to create React app with Ant Design
In the docs, it says I need to change .babelrc to modularly load the files, also from https://medium.com/#GeoffMiller/how-to-customize-ant-design-with-react-webpack-the-missing-guide-c6430f2db10f..
But, I can't find any.. I'm very new to Webpack/Babel/other things...
I used create-react-app to make React app
Please help..
This is my package.json:
{
"name": "ant",
"version": "0.1.0",
"private": true,
"dependencies": {
"antd": "^3.0.3",
"jquery": "^3.2.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.0.17"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"babel-plugin-import": "^1.6.3",
"css-loader": "^0.28.7",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"less-vars-to-js": "^1.2.1",
"style-loader": "^0.19.1"
}
}

for anyone that ends up here in the future, some clarification: when you create your project with CRA, the babel configuration exists as part of the react-scripts setup (react-scripts is the package responsible for all the tooling magic of CRA). this means all babel related controls are nested somewhere inside of your project's node_modules directory. for all intents and purposes, they are not editable, and ejecting is required.

If you have created React app using create-react-app, first you need to eject from the app so that you can use custom configuration. Check this official doc about custom setup : link
Note: this is a one-way operation. Once you eject, you can’t go back!
Once you run "npm run eject" when you are in a react app, you can then use custom babel presets. After ejecting from project, go to package.json and you will find babel presets.
There are two ways to edit your Babel configuration in your react app
1) Edit directly using package.json :
{
"babel": { // nest config under "babel"
"presets": [
"es2015",
],
"plugins": ["transform-class-properties"]
}
}
2) Create new .babelrc file and edit the configuration :
//.babelrc
{
"presets": [
"es2015",
],
"plugins": ["transform-class-properties"]
}

Related

Nextjs Cypress Only found unit test code coverage

I am trying to add code coverage to cypress following this tutorial
I added #cypress/code-coverage and babel-plugin-istanbul to my package.json file below
{
"name": "quiz",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"cypress": "cypress open"
},
"dependencies": {
"next": "12.0.10",
"react": "17.0.2",
"react-dom": "17.0.2",
"sass": "^1.49.7"
},
"devDependencies": {
"#cypress/code-coverage": "^3.9.12",
"#types/node": "17.0.15",
"#types/react": "17.0.39",
"babel-plugin-istanbul": "^6.1.1",
"cypress": "^9.4.1",
"eslint": "8.8.0",
"eslint-config-next": "12.0.10",
"typescript": "4.5.5"
}
}
I configured my cypress/support/index.js
// Import commands.js using ES2015 syntax:
import './commands'
// Alternatively you can use CommonJS syntax:
// require('./commands')
import '#cypress/code-coverage/support'
I configured my cypress/plugins/index.js
/**
* #type {Cypress.PluginConfig}
*/
// eslint-disable-next-line no-unused-vars
module.exports = (on, config) => {
require('#cypress/code-coverage/task')(on, config)
on('file:preprocessor', require('#cypress/code-coverage/use-babelrc'))
return config
}
My .babelrc
{
"presets": [
"next/babel"
],
"plugins": [
"istanbul"
]
}
After I run my test I get the following message
Only found unit test code coverage. [#cypress/code-coverage]
After I run my quiz.spec.js test, I run
npx nyc report --reporter=text-summary
And get an empty coverage summary
What am I doing wrong?
My github
I think it was just a node_modules problem, as your repo worked after download and initialization. I think babel can fail silently if it's dependencies are out of order.
I removed package.lock (because I use yarn to manage things) and then yarn to init the dependecies.

Get code coverage from Cypress with babel, nyc and istanbul plugin?

For a React/Redux project I use Cypress to test the UI. I need to get code coverage from thoses tests to have the details in Sonar (but that's another story).
So I began reading the docs from Cypress: https://docs.cypress.io/guides/tooling/code-coverage.html
I followed the instructions and found the differents plugins but nothing work. After running Cypress tests I have no coverage results and when I try to run the server with instrumented code on transpilation and try to get window.__coverage__ it's undefined.
So here is my configuration.
My devDep and NYC conf in package.json:
"devDependencies": {
"#cypress/code-coverage": "^1.8.0",
"babel-cli": "^6.26.0",
"babel-plugin-istanbul": "^5.2.0",
"babel-plugin-react-intl": "^2.4.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-react-app": "^3.1.2",
"cross-env": "^5.2.0",
"cypress": "3.1.0",
"istanbul-lib-coverage": "^2.0.5",
"jest-junit-reporter": "^1.1.0",
"junit": "^1.4.9",
"nyc": "^14.1.1",
"react-test-renderer": "^16.3.0"
[...]
},
"scripts": {
"start": "react-scripts start",
[...]
"test:unit:local": "react-scripts test --env=jsdom .*_test.js",
"test:unit": "npm run test:unit:local -- --ci --coverage --testResultsProcessor ./node_modules/jest-junit-reporter",
"test:integ:local": "cypress run --reporter junit",
"test:integ": "start-server-and-test start http://localhost:3000 test:integ:local",
"test": "cross-env NODE_ENV=test && npm run test:unit && npm run test:integ"
},
"nyc": {
"sourceMap": false,
"instrument": false
}
My .babelrc file:
{
"presets": ["#babel/preset-react"],
"plugins": [
[ "react-intl", {
"messagesDir": "./src/messages",
"extractSourceLocation": true
}],
"transform-class-properties",
"istanbul"
],
"env": {
"test": {
"plugins": [ "transform-class-properties", "istanbul" ]
}
}
}
My \cypress\support\index.js contains this line :
import '#cypress/code-coverage/support'
And here is my \cypress\plugins\index.js:
module.exports = (on, config) => {
on('task', require('#cypress/code-coverage/task'))
on('file:preprocessor', require('#cypress/code-coverage/use-babelrc'))
return config
}
So I expect to have a result like you can see on the Cypress docs.
The website is generated but the files containing coverage reports are empty.
And I don't understand what's wrong in my configuration.
Try the following line:
"start": "react-scripts -r #cypress/instrument-cra start",
I faced this issue too. Wasn't able to get code coverage. Downgrading nyc version from 14.x.x to 13.x.x fixed the problem, as mentioned here.

Jest error with not transpiled node module

When trying to run a test Jest throws the encountered unexpected token error. I'm using ky http, which obviously causes the problem and not get's transpiled.
Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
Z:\sepview.web\sepview-react\node_modules\ky\index.js:277
export default createInstance();
^^^^^^
SyntaxError: Unexpected token export
1 | import * as React from 'react';
> 2 | import ky from 'ky';
| ^
3 |
4 | class HttpService extends React.Component {
5 |
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
at Object.<anonymous> (src/components/HttpService.tsx:2:1)
Test Suites: 1 failed, 1 total
Here's my package.json
{
"name": "test",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.7",
"#fortawesome/free-solid-svg-icons": "^5.4.2",
"#fortawesome/react-fontawesome": "^0.1.3",
"#types/d3": "^5.0.1",
"bootstrap": "^4.1.3",
"bootswatch": "^4.1.3",
"d3": "^5.7.0",
"d3-array": "^2.0.2",
"jquery": "^3.3.1",
"ky": "^0.5.1",
"moment": "^2.22.2",
"node-sass": "^4.9.4",
"popper.js": "^1.14.4",
"react": "^16.6.0",
"react-dom": "^16.6.0",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.1",
"typescript": "^3.1.6"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#types/enzyme": "^3.1.14",
"#types/enzyme-adapter-react-16": "^1.0.3",
"#types/jest": "^23.3.9",
"#types/node": "^10.12.2",
"#types/react": "^16.4.18",
"#types/react-dom": "^16.0.9",
"#types/react-router": "^4.4.0",
"#types/react-router-dom": "^4.3.1",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.6.0"
},
"proxy": "http://localhost:43947"
}
When adding transform or transformIgnorePatterns to package.json like this:
"jest": {
"transform": {
"^.+\\.js$": "babel-jest"
},
"transformIgnorePatterns": [
"/node_modules/(?!(#ky)/).*/"
]
},
I get this error:
Out of the box, Create React App only supports overriding these Jest options:
• collectCoverageFrom
• coverageReporters
• coverageThreshold
• globalSetup
• globalTeardown
• resetMocks
• resetModules
• snapshotSerializers
• watchPathIgnorePatterns.
These options in your package.json Jest configuration are not currently supported by Create React App:
• transform
• transformIgnorePatterns
If you wish to override other Jest options, you need to eject from the default setup. You can do so by running npm run eject but remember that this is a one-way operation. You may also file an issue with Create React App to discuss supporting more options out of the box.
I also have a babel.config.js which is empty atm:
module.exports = function () {
const presets = [];
const plugins = [];
return {
presets,
plugins
};
}
Ejecting is not an option. I tryed solving this for + one week. Any help is heavily appreciated.
I had a similar problem using material-ui-next-pickers which was using es6 imports in dist/
This is because material-ui-next-pickers isn’t being transpiled before running in Jest. create-react-app excludes everything from ./node_modules.
We could fix this by changing transformIgnorePatterns but it isn't supported by create-react-app as noted in the question.
However, we can still pass it as command arg to react-script test --transformIgnorePatterns \"node_modules/(?!my-module)/\"
Example
"scripts": {
"test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!material-ui-next-pickers)/\" --env=jsdom",
...
}
add
moduleNameMapper: {
'^ky$': require.resolve('ky').replace('index.js', 'umd.js'),
},
to your jest.config.js

How can I prevent my React application from including Bootstrap in the bundle?

I'm new at React.JS and I have made some sample app to test it, in my site I've already have the call to bootstrap CDN so I don't need to call bootstrap again in my React APP, but when I run 'npm run build', in the output, bootstrap code is appended to the css file, how can I disable bootstrap in my project.
Thank you...
UPDATE:
This is my package.json file, I've already remove the call from this file, but it still appending bootstrap.
{
"name": "new-home",
"version": "0.1.0",
"private": true,
"homepage" : "home/newHome/build",
"dependencies": {
"#types/react-slick": "^0.23.2",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-scripts": "1.1.5",
"react-slick": "^0.23.1",
"reactstrap": "^6.5.0",
"slick-carousel": "^1.8.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Solved,
In index.js I needed to remove the import call to bootstrap, in my case I removed but I recommend just comment it.
Thanks everyone...
If you have not Ejected(which isnt recommended for newer react users) than you may not be able to see it in your package.json file, but on eject you will see it in there.

React Jest causing "SyntaxError: Unexpected token ."

I am now using React Jest to test code. If a component is single, and not importing anything else, "npm test" runs smoothly. Now I want to test multiple components together, and I immediately get this error:
SyntaxError: Unexpected token .
It seemed whenever React is importing something else, such as this one:
require( './style/fixed-data-table.css' );
require( './style/jnpr-datatable.scss' );
and then using Jest, it is throwing the unexpected token "." error.
There must be something wrong in my settings, but where? My package.json file contains:
"jest": {
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/react/",
"<rootDir>/node_modules/react-dom/",
"<rootDir>/node_modules/react-addons-test-utils/"
]
}
And the .babelrc file is already in the root. Also babel-jest is included.
Have a look at the Jest documentation for Webpack integration. The problem is that Jest can’t work with other stuff than JavaScript. So you have to mock all non-JavaScript files you import. The easiest way is to configure a moduleNameMapper in your Jest configuration.
{
"jest": {
"moduleNameMapper": {
"\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js"
}
}
}
With a __mocks__/styleMock.js, that looks like this.
module.exports = {};
The easiest is to add an identity-obj-proxy package:
yarn add --dev identity-obj-proxy
And use it to automatically mock CSS/SCSS modules.
Add this to the package.json:
"jest": {
"moduleNameMapper": {
"\\.(css|scss)$": "identity-obj-proxy"
}
}
Or the following to jest.config.ts:
moduleNameMapper: {
'\\.(css|scss)$': 'identity-obj-proxy'
}
This way (S)CSS module class names will be automatically retrieved in tests.
Here is the source.
npm i -D identity-obj-proxy
Add the below to file jest.config.js
moduleNameMapper: {
"\\.(css|less|scss|sass)$": "identity-obj-proxy"
}
File jest.config.js:
testEnvironment: 'jsdom',
The way I got away with this was by adding these two lines to my .babelrc file:
{
"presets": ["env", "react"],
"plugins": ["transform-class-properties"]
}
And my package.json file looks like this:
{
"name": "crud-redux",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.4.0",
"react-dom": "^16.4.0",
"react-scripts": "1.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "NODE_ENV=test jest",
"eject": "react-scripts eject"
},
"devDependencies": {
"babel-jest": "^18.0.0",
"babel-loader": "^6.4.1",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"enzyme": "^2.9.1",
"jest": "^23.1.0",
"react-addons-test-utils": "^15.6.2",
"react-test-renderer": "^15.6.2",
"redux-mock-store": "^1.5.1",
"webpack": "^1.15.0",
"webpack-dev-server": "^1.16.5"
}
}

Resources