jest-static-stubs

jest-static-stubs

Stubbing imported assets (typically, in react components / ES6) so they work in JEST.

why?

Sometimes, you don't want to use harmony-reflect or cannot (node 4) or you need to test onload behaviour handlers. These stubs will return their content type's equivalent of blank.gif, not just an empty string.

the use case

If you have a component that does a direct import of an image, when testing it with Jest, it will break. So... you need to stub it.

import React from 'react';
import Logo from './logo.png';

export default class Foo extends React.Component {

  handleLoad(){
    this.ready = true;
    console.log(this.logo.src);
  }

  render(){
    return <div>
      <img src={Logo} onLoad={::this.handleLoad} ref={logo => this.logo = logo} />
    </div>;
  }
}

Testing then is just transparent:

import React from 'react';
import renderer from 'react-test-renderer';
import Foo from '../src/foo';

jest.mock('react-dom');

describe('component tests >', () => {

  it('renders correctly', () => {
    const tree = renderer.create(<Foo />).toJSON();
    expect(tree).toMatchSnapshot();
  });
});

The snapshot will just have something like

exports[`component tests > renders correctly 1`] = `
<div>
  <img
    onLoad={[Function bound handleLoad]}
    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==" />
</div>
`;

how to use

$ npm i jest-static-stubs -D

Edit package.json and in the jest section, add your mappers:

{
  "jest": {
    "moduleNameMapper": {
      "^.+\\.(jpg|jpeg)$": "jest-static-stubs/jpg",
      "^.+\\.gif$": "jest-static-stubs/gif",
      "^.+\\.(eot|otf|svg|ttf|woff|woff2|mp3|m4a|aac|oga)$": "identity-obj-proxy",
    }
  }
}

Jest module mappers support capturing regex as well. This means you can create catch-all mappings like this:

{
  "jest": {
    "moduleNameMapper": {
       "^.+\\.(jpg|jpeg|gif|png|mp4|mkv|avi|webm|swf|wav|mid)$": "jest-static-stubs/$1"
    }
  }
}

types

• jpg, gif, png
• wav, mid
• webm, mkv, flv, avi, mp4
• swf