通过 react-scripts-ts 进行测试时出现“语法：意外标识符”错误答案

【问题标题】：'Syntax: Unexpected identifier' error when testing via react-scripts-ts通过 react-scripts-ts 进行测试时出现“语法：意外标识符”错误
【发布时间】：2019-06-19 08:48:09
【问题描述】：

使用 react-scripts-ts (2.17.0) 我正在尝试设置一个测试套件。但我收到“SyntaxError: Unexpected identifier”。

这是配置：

tsconfig.json (using the standard of JSX handbook)

{
  "compilerOptions": {
    "jsx": "react"
  }
}

这是组件的布局：

./App.tsx

interface IAppProps extends WithStyles<typeof styles> {
  // ...
}

export interface IAppState {
  // ...
}

class App extends React.Component<IAppProps, IAppState> {
  // ...
}

export default withStyles(styles)(App);

这将是测试设置：

./app.test.ts

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

it('renders without crashing', () => {
  const app = React.createElement(App);
  const div = document.createElement('div');
  ReactDOM.render(app, div);
});

我应该以某种方式运行 Babel 吗？

【问题讨论】：

标签： reactjs jestjs react-scripts

【解决方案1】：

原来样式是作为 es 加载的，而不是由文件类型定义的。在这里找到答案：https://github.com/mui-org/material-ui/issues/14349

从"react-scripts-ts": "2.17.0" 更新为"react-scripts-ts": "^3.1.0"

然后变了：

import withStyles from '@material-ui/core/es/styles/withStyles';
import { WithStyles } from '@material-ui/core/styles/withStyles';

收件人：

import { withStyles, WithStyles } from '@material-ui/core';

而且它有效。

【讨论】：