{"id":17181511,"url":"https://github.com/dimitarchristoff/jest-static-stubs","last_synced_at":"2025-08-02T16:41:03.022Z","repository":{"id":57280483,"uuid":"70141085","full_name":"DimitarChristoff/jest-static-stubs","owner":"DimitarChristoff","description":"Stubbing imported image assets","archived":false,"fork":false,"pushed_at":"2016-10-06T13:24:11.000Z","size":10,"stargazers_count":9,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-08T16:01:54.923Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DimitarChristoff.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-06T09:40:29.000Z","updated_at":"2023-08-22T18:32:46.000Z","dependencies_parsed_at":"2022-09-19T17:11:24.900Z","dependency_job_id":null,"html_url":"https://github.com/DimitarChristoff/jest-static-stubs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DimitarChristoff%2Fjest-static-stubs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DimitarChristoff%2Fjest-static-stubs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DimitarChristoff%2Fjest-static-stubs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DimitarChristoff%2Fjest-static-stubs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DimitarChristoff","download_url":"https://codeload.github.com/DimitarChristoff/jest-static-stubs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248758031,"owners_count":21156955,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-15T00:34:31.887Z","updated_at":"2025-04-13T17:50:34.087Z","avatar_url":"https://github.com/DimitarChristoff.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jest-static-stubs\n\nStubbing imported assets (typically, in react components / ES6) so they work in JEST.\n\n## why?\n\nSometimes, 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.\n\n## the use case\n\nIf 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.\n\n```js\nimport React from 'react';\nimport Logo from './logo.png';\n\nexport default class Foo extends React.Component {\n\n  handleLoad(){\n    this.ready = true;\n    console.log(this.logo.src);\n  }\n\n  render(){\n    return \u003cdiv\u003e\n      \u003cimg src={Logo} onLoad={::this.handleLoad} ref={logo =\u003e this.logo = logo} /\u003e\n    \u003c/div\u003e;\n  }\n}\n```\n\nTesting then is just transparent:\n\n```\nimport React from 'react';\nimport renderer from 'react-test-renderer';\nimport Foo from '../src/foo';\n\njest.mock('react-dom');\n\ndescribe('component tests \u003e', () =\u003e {\n\n  it('renders correctly', () =\u003e {\n    const tree = renderer.create(\u003cFoo /\u003e).toJSON();\n    expect(tree).toMatchSnapshot();\n  });\n});\n```\n\nThe snapshot will just have something like\n```js\nexports[`component tests \u003e renders correctly 1`] = `\n\u003cdiv\u003e\n  \u003cimg\n    onLoad={[Function bound handleLoad]}\n    src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==\" /\u003e\n\u003c/div\u003e\n`;\n```\n\n## how to use\n\n```sh\n$ npm i jest-static-stubs -D\n```\n\nEdit `package.json` and in the `jest` section, add your mappers:\n\n```json\n{\n  \"jest\": {\n    \"moduleNameMapper\": {\n      \"^.+\\\\.(jpg|jpeg)$\": \"jest-static-stubs/jpg\",\n      \"^.+\\\\.gif$\": \"jest-static-stubs/gif\",\n      \"^.+\\\\.(eot|otf|svg|ttf|woff|woff2|mp3|m4a|aac|oga)$\": \"identity-obj-proxy\",\n    }\n  }\n}\n```\n\nJest module mappers support capturing regex as well. This means you can create catch-all mappings like this:\n\n```json\n{\n  \"jest\": {\n    \"moduleNameMapper\": {\n       \"^.+\\\\.(jpg|jpeg|gif|png|mp4|mkv|avi|webm|swf|wav|mid)$\": \"jest-static-stubs/$1\"\n    }\n  }\n}\n```\n\n\n## types\n\n - jpg, gif, png\n - wav, mid\n - webm, mkv, flv, avi, mp4\n - swf\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimitarchristoff%2Fjest-static-stubs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdimitarchristoff%2Fjest-static-stubs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimitarchristoff%2Fjest-static-stubs/lists"}