add guide for snapshot testing permutations

[jthegedus]

What:

I would like an example/guide to show snapshot testing with Jest, including conditionally rendered components as it's unclear how one should approach snapshot testing with these types of libs.

Why:

This library simplifies managing breakpoints so folks like myself don't need to learn all the intricate details. Setting up styled-components and jest testing has been a struggle. Finally getting things sorted with this setup mock:

// Mock matchMedia once in Jest setup for styled-components media breaks as used in atomic-layout
Object.defineProperty(global.window, 'matchMedia', {
  value: query => {
    console.log(query);
    return {
      matches: false,
      media: query,
      addListener: () => {},
      removeListener: () => {}
    };
  }
});

// module.exports = global.window;

worked nicely except now I can't get a snapshot of each permutation of the component. A guide on this topic would go a long way.

How:

Additional docs/examples

[kettanaito]

Hello, @jthegedus. Thank you for raising this concern.

It's been a struggle for me to get an effective setup of Jest to assert responsive behaviors without hard-coding any of matchMedia logic. Perhaps, the current setup may help you:

https://github.com/kettanaito/atomic-layout/blob/0cfc40513b8adeac4e2a9a2dc6a3257361db662b/tests/matchMedia.mock.js

The intent is to include this mock in any test suite that needs to assert a responsive behavior. It uses matchMedia alternative that works in NodeJS, and thus can provide with the actual results when interacting with the window.

I'm not currently using this setup during the atomic-layout testing, as I found end-to-end tests more effective when asserting responsive behaviors.

Could you please give me an example of your test suite? I would like to understand better what are you trying to test, so I can come up with guidelines. Thanks.

[jthegedus]

I'm not even sure my idea is useful. But essentially I wanted to get a Jest snapshot of the tree in each permutation. Simply:

import React from 'react';
import {render} from 'react-testing-library';
import RootPage from '../../src/pages';

describe('Root Page', () => {
  it('Snapshot test for small screen', () => {
    // somehow set the screen size
    const {asFragment} = render(<RootPage/>);
    expect(asFragment()).toMatchSnapshot();
  });

  it('Snapshot test for large screens', () => {
    // somehow set the screen size
    const {asFragment} = render(<RootPage/>);
    expect(asFragment()).toMatchSnapshot();
  });
});

The mock I initially provided outputs all components in the tree regardless of the screen size. Which is fine since it tracks all of the components and their changes, so again, I am not sure if splitting the snapshot out into multiple files is useful.

[kettanaito]

I think the trickiest part is to actually react on window resize during the unit test. The setup code above I've mentioned helps to mock a matchMedia to resolve proper .matches according to the window size.

atomic-layout is using matchMedia internally, so if it's mocked and returns a hard-coded value, this affects what responsive result the library returns. So the setup is necessary not for the tests per say, but for the functionality of the library which you are trying to render in a test suite.

I will try to look into this, but can't promise this to be tackled any time soon. If you have time, please play around with these test suites using the mentioned jest setup and let me know the results in this thread. Much thanks!

[jthegedus]

I will definitely share any advances in this space, thanks for the awesome layout tool!