Additional Jest config to stub static assets and stylesheets

[edwardpayton]

Current Behavior

For every new project I start with TSDX, one of my first steps is to add stubs for static assets and stylesheets - as detailed on the Jest docs.

Desired Behavior

Add Jest file stubs in to the TSDX setup.

Suggested Solution

Following the Jest docs

// package.json
{
  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "identity-obj-proxy"
    }
  }
}

// test/__mocks__/fileMock.js
module.exports = 'test-file-stub';

yarn add --dev identity-obj-proxy

This prevents images and stylesheets causing errors while testing. These steps have been sufficient in any of my use cases.

Who does this impact? Who is this for?

Css modules and / or images are not recognised by Jest so cause errors. So this is for anybody who writes tests with their components.

It will help prevent beginners being confused by console errors that they may not find clear, and advanced users who go through the same setup on each project they work on.

Describe alternatives you've considered

I'm not searching for alternatives applies here.

Additional context

I can work on this and submit a Pull Request when done. That was going to be my first action but thought opening an issue here may invite others ideas.

Also, fantastic library! My favourite TypeScript setup, I use it any chance I find.

All the best
Ed

[jaredpalmer]

Can likely steal from CRA’s setup

[edwardpayton]

Good idea, I'll take a look