Блог

Я создаю приложение React с помощью AWS Amplify.

Я тестирую свое приложение с помощью RITEway. Чтобы использовать RITEway с React, я должен установить @babel/core @babel/polyfill @babel/preset-env @babel/register , а затем запустить тесты с:

 "test": "riteway -r @babel/register -r @babel/polyfill 'src/**/*.test.js' | tap-color"
  

Определяется .babelrc следующим образом:

 {
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": ["last 2 versions", "safari >= 7"]
      }
    ],
    "@babel/preset-react"
  ]
}
  

Я подключил компонент к graphql с помощью AWS Amplify и его вспомогательных методов AppSync:

 export default compose(
  graphqlMutation(gql(createContact), gql(listContacts), 'Contact'),
)(CreateContactButton);
  

В одном из тестов эта кнопка отображается как дочерний компонент. Теперь этот тест завершается сбоем, в котором говорится, что client в контексте компонента отсутствует ошибка, которую я исправляю, заключая ее в a <ApolloProvider /> в тестовом файле:

 describe('ContactList component', async assert => {
  const createContactList = (props = {}) =>
    render(
      <ApolloProvider client={client}>
        <Provider store={store}>
          <ContactList {...props} />
        </Provider>
      </ApolloProvider>
    );
  

Как только я это делаю, тесты завершаются с ошибкой:

 /Users/jan/dev/myapp/node_modules/@aws-amplify/ui/dist/style.css:13
:root {
^

SyntaxError: Unexpected token :
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Object.newLoader [as .js] (/Users/jan/dev/myapp/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
  

Я не могу изменить код Amplify. Какие еще плагины babel мне нужно добавить, чтобы избежать сбоев моих тестов при работе с CSS? Или, в более общем плане, как я могу избежать сбоя babel в этом babel и запустить мои тесты?

Babel не может обрабатывать ресурсы, такие как CSS или файлы изображений. Но пакет @babel / register предоставит способ настройки пользовательских загрузчиков с помощью расширения. Их можно оценить после импорта пакета @babel / register . Он перезапишет исходное требование от узла требованием от babel. Для настройки extensions require пользовательского загрузчика доступен объект настроек. Чтобы игнорировать какое-либо расширение, просто установите загрузчик для расширения на пустую функцию, например:

 require.extensions['.css'] = () => {};
  

В сочетании с RITEway дополнительный файл с таким именем babelInit.js и некоторой конфигурацией, подобной этой, можно использовать для игнорирования файлов изображений CSS и JPG:

 require('@babel/register');
require('@babel/polyfill');

require.extensions['.css'] = () => {};
require.extensions['.jpg'] = () => {};
  

Наконец, требуется новый файл конфигурации вместо самих пакетов:

 {
  "scripts": {
    "test": "riteway -r ./babelInit.js 'src/**/*.test.js' | tap-color"
  }
}