Блог

Я столкнулся с проблемой с Jest, когда он не может понять параметры типа класса.

Пример репозитория

Вывод ошибки

 SyntaxError: /Users/john/dev/webpack-test/src/__tests__/utils.test.js: Unexpected token (18:40)

      16 | describe('new Drawer()', () => {
      17 |   it('should add and remove socks', () => {
    > 18 |     const sockDrawer = new Drawer<Sock>();
  

Я использую общий пример класса из TypeScript playground.

Пример кода

 export class Drawer<ClothingType> {
  contents: ClothingType[] = [];

  add(object: ClothingType) {
    this.contents.push(object);
  }

  remove() {
    return this.contents.pop();
  }
}

export interface Sock {
  color: string;
}

export interface TShirt {
  size: "s" | "m" | "l";
}
  

Затем у меня есть тест, который его использует. Я также вызываю его из своего приложения React, просто чтобы убедиться, что оно может скомпилировать его там, и оно делает это успешно.

Тестовый код

 it('should add and remove socks', () => {
  const sockDrawer = new Drawer<Sock>();

  sockDrawer.add({ color: "white" });
  expect(sockDrawer.contents).toEqual([{ color: 'white' }]);
  const mySock = sockDrawer.remove();
  expect(sockDrawer.contents.length).toEqual(0);
});
  

Код приложения, который отлично компилируется.

Конфигурация Babel

 
{
  "env": {
    "test": {
      "presets": [
        [
          "@babel/preset-env",
          {
            "targets": {
              "node": "10.17.0"
            }
          }
        ],
        "@babel/preset-react",
        "@babel/preset-typescript"
      ],
      "plugins": [
        "@babel/plugin-transform-runtime",
        ["@babel/plugin-proposal-class-properties", { "loose": true }]
      ]
    }
}
  

Любая помощь здесь была бы весьма признательна. Спасибо!

Решением для этого было добавление приведенной ниже конфигурации presets в вашу конфигурацию Babel.

 [
    "@babel/preset-typescript",
    {
        "isTSX": true,
        "allExtensions": true,
        "jsxPragma": "react",
        "onlyRemoveTypeImports": true
    }
]