Babel: Can't load CSS (unexpected token) when using AWS Amplify

Question

I'm building a React app with AWS Amplify.

I unit test my app using RITEway . To use RITEway with React, I have to install @babel/core @babel/polyfill @babel/preset-env @babel/register and then run the tests with:

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

The .babelrc is defined as follows:

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

I've connected a component to graphql using AWS Amplify and it's AppSync helper methods:

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

This button is being rendered as a child component in one of the tests. This test crashes now saying that there is a client missing in the context of the component, which I fix by wrapping it in a <ApolloProvider /> in the test file:

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

As soon as I do that, the tests fails with:

/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)

I can't change the Amplify code. What other babel plugins do I need to add to avoid my tests crashing when encountering CSS? Or, more generally, how can I avoid babel this babel crash and get my tests to run?

Answer 1

Babel can not process resources like CSS or image files. But the @babel/register package will provide a way to configure custom loaders by extension. They can be assessed after the @babel/register package has been imported. It will overwrite the original require from node with the require from babel. There is a settings object extensions on require available to set the custom loader. To ignore some extension just set the loader for the extension to an empty function like this:

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

In combination with RITEway an additional file with a name like babelInit.js and some configuration like this can be used to ignore CSS and JPG image files:

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

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

Finally require the new configuration file instead of the packages it self:

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