React TypeScript项目无IDE编译错误但Jest测试报语法错误

The error you're seeing occurs because the Babel parser used by your current react-scripts version doesn't recognize the combination of async and abstract keywords in class methods—even though this is valid TypeScript. Here are two straightforward fixes:

Solution 1: Remove async from Abstract Methods (Recommended) #

Abstract methods only define a method signature, not an implementation. The async keyword is redundant here because the return type (Promise<Block> / Promise<void>) already indicates that the implemented method should return a promise. You can add async when you implement the method in your concrete class instead.

Here's the corrected ChromeVolume.ts code:

import Keys from "./Keys";
import Volume from "./Volume"
import Block from './Block'
import EventHandler from "../utility/EventHandler"

abstract class ChromeVolume implements Volume {
  readonly error: EventHandler<Volume, Error> = new EventHandler<Volume, Error>(this);

  abstract load<T extends Keys>(keys: T): Promise<Block>
  abstract save<T extends object>(items: T): Promise<void>
  abstract clear(): Promise<void>
}

export default ChromeVolume

When you implement these methods in a concrete class, you can still use async as needed:

class ConcreteVolume extends ChromeVolume {
  async load<T extends Keys>(keys: T): Promise<Block> {
    // Your async implementation here
    return someAsyncOperation(keys);
  }

  // ... other implementations
}

Solution 2: Update react-scripts #

If you prefer to keep the async keyword in your abstract methods, update react-scripts to a version that uses a Babel parser supporting this syntax. Versions of react-scripts v5.0.0 and later include Babel 7.10+, which handles async abstract methods correctly.

Run this command to update:

npm install react-scripts@latest
# or
yarn add react-scripts@latest

Either solution will resolve the syntax error in your Jest tests.

内容的提问来源于stack exchange，提问作者Daniel Douglas Soyka