how to set babel plugins and presets - react-app-rewired

Question

i am new to babel and testing stuff in react so it would be really great if you can provide a little more context for the approaches you can suggest. Thank you

The app was created using react-app-rewired everything works fine but when i run my test script react-app-rewired test it throws this error

SyntaxError: C:\Users\kishan\Documents\GitHub\kp\client\src\components\DateTest\index.js: Support for the experimental syntax 'jsx' isn't currently enabled (219:5):

  217 | 
  218 |   return (
> 219 |     <div className="date-test-container">
      |     ^
  220 |       <input
  221 |         ref={inputRef}
  222 |         type="text"

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

Test file:

const React = require('react');
const {shallow}  = require('enzyme')
const DateTest  = require('./') // component needs to be tested



it('should render date test component and check current month',()=>{
    // const wrapper = shallow(<DateTest />);
    // const month = wrapper.find('span.monthName').text();
    // expect(text).toEqual("March");
})

what i tried: useBabelRc() from customize-cra can see the documentation here

Causes your .babelrc (or .babelrc.js) file to be used, this is especially useful if you'd rather override the CRA babel configuration and make sure it is consumed both by yarn start and yarn test (along with yarn build).

//inside my config-overrides.js

module.exports = override(
  useBabelRc()
);

// inside my .babelrc

{
    "presets": [ "@babel/preset-react"]
}

But getting the same error as above

please let me know if more information required

how to set babel plugins and presets - react-app-rewired

0 Answers0