https://github.com/dimitarchristoff/jest-static-stubs
Stubbing imported image assets
https://github.com/dimitarchristoff/jest-static-stubs
Last synced: 11 months ago
JSON representation
Stubbing imported image assets
- Host: GitHub
- URL: https://github.com/dimitarchristoff/jest-static-stubs
- Owner: DimitarChristoff
- License: mit
- Created: 2016-10-06T09:40:29.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-10-06T13:24:11.000Z (over 9 years ago)
- Last Synced: 2025-04-08T16:01:54.923Z (about 1 year ago)
- Language: JavaScript
- Size: 9.77 KB
- Stars: 9
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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.
```js
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
this.logo = logo} />
;
}
}
```
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().toJSON();
expect(tree).toMatchSnapshot();
});
});
```
The snapshot will just have something like
```js
exports[`component tests > renders correctly 1`] = `
`;
```
## how to use
```sh
$ npm i jest-static-stubs -D
```
Edit `package.json` and in the `jest` section, add your mappers:
```json
{
"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:
```json
{
"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