Fix svgr in storybook & jest

[EnzoVezzaro]

Fixes #

Changes proposed in this PR:

• fix svg loader in storybook

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
market	✅ Ready (Inspect)	Visit Preview	May 16, 2022 at 3:49PM (UTC)

1 Ignored Deployment

Name	Status	Preview	Updated
market-v3	⬜️ Ignored (Inspect)		May 16, 2022 at 3:49PM (UTC)

[EnzoVezzaro]

moved to draft as tests are failing.

[EnzoVezzaro]

Still not luck. Being swimming in more issues related to this. Mostly:

Tried documented solution:
https://react-svgr.com/docs/jest/#2-configure-jest

Tried some suggested fixes, but nothing seems to work:

• svgr + jest not configured nrwl/nx#4850
• Try to test component with React generated form svgr gregberge/svgr#83 (here)
• next/jest feedback vercel/next.js#31152
• https://stackoverflow.com/questions/58603201/jest-cannot-load-svg-file
• https://stackoverflow.com/questions/70985625/why-am-i-unable-to-import-svg-in-jest
• feat(next/jest): mock static imports of svg, image and others differently vercel/next.js#36907
• https://medium.com/@real-biel/jest-typescript-and-svgs-44b4333a1164

tried also:

• https://www.npmjs.com/package/jest-transform-stub
• https://www.npmjs.com/package/jest-svg-transformer
• https://www.npmjs.com/package/ts-jest

[kremalicious]

also tinkering around on this but no luck so far. What I don't like is that the tests don't fail in the end although they clearly should. It looks like all the storyshots will succeed even if they spit out console errors.

Quickly tried minimal Logo test, and this fails successfully with the same error where the storyshots don't fail:

import React from 'react'
import { render } from '@testing-library/react'
import Logo from './'

test('Logo', async () => {
  render(<Logo />)
})

So getting the test run to fail in this current state would be another goal

[EnzoVezzaro]

So getting the test run to fail in this current state would be another goal

yeah, this is cra! 😬 ok 👍🏽

[EnzoVezzaro]

Still no luck on this. I tried so many way to do the same thing, but nothing seems to be working. I'm sure at the end it'll be a trivial setup issue (hopefully), but all of those issues related to the same thing is kind of discouraging though. 😪

[kremalicious]

I'm sure at the end it'll be a trivial setup issue

BINGO!

I was deep in next/jest Vercel-Land to verify we are not just overwriting but appending config things, then after hours realized that maybe the moduleNameMapper rules are matched in specific order cause a matched thing can't be matched twice. And in our case svg rule clashed with the @images rule. Just moved the svg rule to the very top, so far could not find any unintended consequences for this.

No console errors and my dummy Logo test was green. Still concerned that Jest + Storybook didn't error out as it did Jest + Testing Library alone but that can be solved somewhere else. Was quickly dropping in https://github.com/ValentinH/jest-fail-on-console to see if I can get the Jest + Storybook combination to fail with console errors but that didn't work either.

[codeclimate]

Code Climate has analyzed commit 7a44b55 and detected 0 issues on this pull request.

The test coverage on the diff in this pull request is 100.0% (50% is the threshold).

This pull request will bring the total coverage in the repository to 0.7% (0.0% change).

View more on Code Climate.

[EnzoVezzaro]

oh boy, finally. I confirm the test is passing now.

[kremalicious]

awesome! And as usual lots of research needed to get to a code change which is quite small in the end

[claudiaHash]

👏