Ava: Error testing React components which import images

[kevinkorngut]

AVA is attempting to process an image file which is throwing an error. With Mocha I have in the past configured custom compilers for certain extensions to prevent it from processing images is there something similar with AVA?

Sample component with an image

import React from 'react'
import CSSModules from 'react-css-modules'
import styles from './helloworld.css'
import image from '../../assets/images/Baymax_hero_hug.gif'

class HelloWorld extends React.Component {

  /* constructor, welcomeLabel not shown */

  render() {
    return (
        <div styleName='hello-world'>
            <h1>{this.welcomeLabel(this.props.locale)}</h1>
            <div styleName='image-container'>
                <img src={image}></img>
            </div>
      </div>
    )
  }
}

HelloWorld.propTypes = {
  locale: React.PropTypes.string.isRequired
}

export default CSSModules(HelloWorld, styles)

A sample test:

import React from 'react'
import TestUtils from 'react-addons-test-utils'
import test from 'ava'
import 'css-modules-require-hook/preset'
import HelloWorld from './helloworld'

const renderer = TestUtils.createRenderer();

test('it is a div', t => {
  renderer.render(React.createElement(HelloWorld, {locale: 'en_US'}))
  const componentType = renderer.getRenderOutput().type;
  t.true(componentType === 'div');
})

and the error:

SyntaxError: /react/react-webpack-starter/src/assets/images/Baymax_hero_hug.gif: Unexpected character '�' (1:6)
> 1 | GIF89a�"�

   1 exception

  ✖ src/app/components/helloworld.avaspec.js exited with a non-zero exit code: 1

edit: updated code sample

[DrewML]

I think the main issue here is that import statements (really require statements) do not expect anything but valid JavaScript to be in the files you import.

If you're using Babel in your source files (I assume you are since you're using JSX), you _might_ be able to use this Babel plugin to prevent the error.

[kevinkorngut]

Yes, I am using Babel and that plugin plus the following loader:

      {
        test: /\.(gif|png|jpe?g|svg)$/,
        loaders: [ 'null-loader' ]
      }

got me going again. Thanks.

[AgtLucas]

@DrewML and @kevinkorngut

I'm having the same problem, I've tried to implement a new webpack config for AVA (using babel-plugin-webpack-loaders) but it's not working.

Here's what I did:

package.json:

"scripts: {
    "test": "AVACONFIG=$(pwd)/webpack.config.ava.js BABEL_DISABLE_CACHE=1 NODE_ENV=AVA ava",
}
...
"ava": {
    "files": [
      "src/**/*.test.js"
    ],
    "babel": "inherit",
    "failFast": true,
    "serial": true,
    "tap": true,
    "verbose": true,
    "require": [
      "babel-register",
      "./test/helpers"
    ]
  }

.babelrc

{
  "presets": ["es2015", "react", "stage-0"],
  "plugins": [
    "transform-object-rest-spread"
  ],
  "env": {
    "AVA": {
      "plugins": [
        [
          "babel-plugin-webpack-loaders",
          {
            "config": "${AVACONFIG}",
            "verbose": false
          }
        ]
      ]
    }
  }
}

webpack.config.ava.js

...
module.exports = {
  devtool: undefined,
  entry: [
    path.join(__dirname, 'src/js/app.js')
  ],

  output: {
    path: path.join(__dirname, '/dist/'),
    filename: '[name].js',
    libraryTarget: 'commonjs2'
  },

  module: {
    loaders: [
      {
        test: /\.(gif|png|jpe?g|svg)$/,
        loaders: ['null-loader']
      }
    ]
  }
}

What am I missing?

Thanks!

[bensleveritt]

I've just stumbled into this snag too. Whilst I'm happy to add a plugin, I wonder why we can't exclude the file from AVA's config? Does this only apply to imported files?

[seansean11]

I was able to bypass this issue by copying the "noop/require.extensions" section of the react-starter-kit and adding it to my required Ava setup file. It stops the files from being imported, which was perfectly fine for my testing setup https://github.com/kriasoft/react-starter-kit/blob/master/test/setup.js.

[Wildhoney]

For those who need to parse YAML files:

import { readFileSync } from 'fs';
import { safeLoad } from 'js-yaml';

require.extensions['.yml'] = (module, filename) => {
    module.exports = safeLoad(readFileSync(filename, 'utf8'));
};

[codeithuman]

How are you getting around this issue today? Are you all still using the answer posted 2 years ago, https://github.com/avajs/ava/issues/802#issuecomment-216262437?