Turning all pngs into svgs

[harryyy27]

I've found a nice piece of software that can turn all svgs into react components. This means they can be passed into jest tests without crashing the software. So we'll be needing our pngs and jpgs turned into svgs in case I can't comment some of them out or not render them

[harryyy27]

Apparently you can do this on photoshop and I hear you're a photoshop wizard

[MissArray]

I'll look into it, test the logo and see whether the result is acceptable. I'm not sure whether this hack will work with photos of e.g. people etc., so I'll test a random photo from the original website to see whether it works and let you know.

The thing with this hack is, it'll work for us but not for the clients: they'll be adding pdf, jpeg, jpg, png and perhaps gif files, as well as mp4 files and whatever else YouTube is using. So it makes sense to get Jest to stop failing tests when these file types are served.

[MissArray]

@harryyy27 I've been reading Jest's documentation to see whether there are any clues as to why image files fail the tests and noticed that in the Configuring Jest section, the advice is either to configure Jest at the top of the package.json (currently not the case)

  "name": "my-project",
  "jest": {
    "verbose": true
  }
}

or to set up a jest.config.js, which I can't seem to find in our project files.

So, I wonder whether explicitly configuring jest, as the documentation suggests, then tweaking its default options, as described in the Defaults section, and including all relevant file types (e.g. png, gif, jpeg, jpg, svg, pdf, mp4 and whatever other file types YouTube uses) in the moduleNameMapper might stop Jest from failing those particular tests?

This example of how to do that seems potentially useful:

"jest": {
  "setupFiles": [
    "raf/polyfill"
  ],
  "moduleNameMapper": {
    "\\.(pdf|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"
  }
},

We will need to find a way to get Jest to pass tests with various file types, because the clients will be adding images and video links, and the former will most likely be jpegs, jpgs, or pngs.
@jamiecoe what do you think?

[harryyy27]

That's a webpack solution. If the clients want to add photos. We can svg them automatically in our starting script if we have to

[harryyy27]

Anyway I have another way of skipping them. So i guess it doesn't matter

[MissArray]

The example is for Webpack, the documentation is for Jest.

If you've found a way of skipping image file types, can you add the remaining file types. i.e. gif, jpg, jpeg, pdf, mp4, perhaps flv too, as the clients will be adding various types of files? Thanks.