Babel: 使用AWS Amplify时，无法加载CSS（意外的标记）。

Question

我正在用AWS Amplify构建一个React应用。

我在单元测试中使用 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"
  ]
}

我已经使用AWS Amplify和AppSync helper方法将一个组件连接到graphql。

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

这个按钮在其中一个测试中被渲染成了一个子组件。这个测试现在崩溃了，说是有一个 client 在组件的上下文中缺失，我通过将其包裹在一个 <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崩溃，让我的测试运行起来？

Answer 1

Babel不能处理CSS或图像文件等资源。但是@babelregister包将提供一种通过扩展配置自定义加载器的方法。它们可以在导入@babelregister包后进行评估。它将用来自babel的require覆盖原来来自node的require。有一个设置对象 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"
  }
}