Proposal: Change the way our uikit tests are structures & snapshots are generated

[ChefHutch]

All just my opinion, keen to hear yours!

Problem

• Current snapshots have hashed classNames
• Current snapshots don't capture styles. I'm not sure snapshotting the dom tree without styles is particularly useful, as it will not catch the kind of regressive visual changes to components that snapshots are useful for.
• Once styles are added to the inlineSnapshots - the test files will become massive, before any other unit test has been added.
• Tests being contained within their own folder decouples them psychologically from the building of a component.

Proposed solution

• Separate tests into the relevant components' folder. Helps prevents tests become an afterthought and ties them to the development of that component.

> pancake-uikit
   > src
      > components
         > Component
              > index.tsx
              ...     
              > index.test.tsx
              > __snapshots__

• Use .toMatchSnapshot() instead of toMatchInlineSnapshot()
• Import jest-styled-components to capture styles in snapshots (so that inadvertant style changes are caught), and remove hashes from classNames
• Added some generic component tests for tabMenu in order to give additional context

Next steps

• ✅ If this approach is agreed, I'll make a PR updating this across all testing in the uikit.
• Including importing "jest-styled-components" within renderWithTheme, rather than the specific test.

[hachiojidev]

@ChefHutch

Import jest-styled-components to capture styles in snapshots (so that inadvertant style changes are caught), and remove hashes from classNames

We already do this in setupTests.js

[ChefHutch]

@hachiojidev

Import jest-styled-components to capture styles in snapshots (so that inadvertant style changes are caught), and remove hashes from classNames

We already do this in setupTests.js

So we do! I'm not sure it's working? We'd see styles in our snapshots and non-hashed classnames if it was. I've spent too much time trying to debug it this morning, sunken cost fallacy kicking in - will just make an issue and leave it.

[ChefHutch]

Closing as per Slack discussion. Made an issue for the fact that setupTests.js' jest-styled-components import isn't firing pancakeswap#20