如何设置 babel 插件和预设 - react-app-rewired

问题描述

我是 babel 的新手，并在 React 中测试东西，所以如果您能为您建议的方法提供更多背景信息，那就太好了。 谢谢

该应用程序是使用 react-app-rewired 创建的，一切正常，但是当我运行测试脚本 react-app-rewired test 时，它会引发此错误

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.

测试文件：

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");
})

我尝试过的： useBabelRc() from customize-cra 可以查看文档 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"]
}

但得到与上面相同的错误

如果需要更多信息，请告诉我

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）