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

Question

使用 react-scripts-ts (2.17.0) 我正在尝试设置一个测试套件。但我收到“语法错误：意外标识符”。

这是配置：

tsconfig.json（使用 JSX 手册的标准）

{
  "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 吗？

标签： reactjsjestjsreact-scripts

Answer 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';

它有效。