Проблемы с тестированием @ uifabric / fluent-theme и create-Reaction-app - PullRequest
Новая
       30

Проблемы с тестированием @ uifabric / fluent-theme и create-Reaction-app

0 голосов
/ 06 апреля 2020

Я создал новое приложение с помощью npx create-реагировать-приложение myapp --template typescript

Я могу успешно выполнить npm запустить тест после его первоначального создания. Однако, если я добавлю office-fabri c -ui-реагировать и @ uifabric / fluent-theme в свой пакет. json, а затем импортирую NeutralColors (или почти все остальное из fluent-theme) в App.tsx, например this:

import {FontSizes} из '@ uifabric / fluent-theme'

При попытке запустить

FAIL src / App.test.tsx появляется ошибка ● Не удалось запустить набор тестов 

C:\projects\web\react\myapp\node_modules\office-ui-fabric-react\lib\Styling.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import './version';
                                                                                         ^^^^^^

SyntaxError: Cannot use import statement outside a module

  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
  at Object.<anonymous> (node_modules/@uifabric/fluent-theme/lib-commonjs/fluent/src/fluent/styles/Breadcrumb.styles.ts:2:1)

Наборы тестов: 1 не пройден, 1 всего тестов: 0 всего моментальных снимков: 0 всего времени: 5,821 с Запущены все наборы тестов.

Просмотреть использование: нажмите w, чтобы показать больше.

Мне удалось обойти это, объявив соответствующие классы вместо констант, которые я пытаюсь импортировать.

Есть ли правильный способ использовать NeutralColors и тому подобное из этой темы, который совместим с тестированием? Перенесены ли эти константы куда-то еще в fluent / fabri c?

По какой-то причине константы объявляются с пространствами имен как 

export namespace FontSizes {
  export const size10 = '10px';
}

// javascript generated is:
export var FontSizes;
(function (FontSizes) {
    FontSizes.size10 = '10px';
})(FontSizes || (FontSizes = {}));

вместо классов? как 

export class FontSizes2 {
  static readonly size10 = '10px';
}
// javascript generated:
export class FontSizes2 {
}
FontSizes2.size10 = '10px';
...