Support for running toMatchVisualSnapshot directly

[CraigCav]

Currently the only entry point for generating visual regression tests is via markdown examples, but it would be really great to be able to support something like this directly:

describe('MyComponent', () => {
  it('should look fantastic', () => {
    expect(<MyComponent myProp="prop value" />).toMatchVisualSnapshot();
  });
});

This would be a softer starting point for people familiar with Jest, and would also provide simpler integration with typescript (type checking the component examples from markdown files is not something we currently have support for)

[CraigCav]

We can get quite close to this today (Sosia v1.2.5).

The following example works, albeit we have to use describe blocks in place of it() blocks in the test definition. Sosia internally creates multiple it blocks to facilitate running an example in a given target environment as an isolated test. This however means that using an it block (wrapping the toMatchVisualSnapshot assertion) would result in nested it blocks - something that is not allowed by jest.

import React from 'react';
import { configure as configureSosia, toMatchVisualSnapshot } from 'sosia';
import { PuppeteerBrowserTarget } from 'sosia-puppeteer';
import App from './App';

expect.extend({ toMatchVisualSnapshot });

class JestSource {
  execute(options) {
    return [
      {
        name: 'inline',
        component: () => options
      }
    ];
  }
}

configureSosia({
  targets: {
    'chrome-low-res': new PuppeteerBrowserTarget({
      width: 480,
      height: 500
    })
  },
  sources: { tests: new JestSource() }
});

describe('App', () => {
  describe('should look fantastic', () => {
    expect(<App />).toMatchVisualSnapshot();
  });
});

There are a few issues that I see with trying to support examples like this:

• The JestSource construct is awkward. We currently have to provide a name to satisfy the interface of Sosia's sources, but I imagine that most examples authored using the expect().toMatchVisualSnapshot() syntax should expect to infer the name from the corresponding it() block, instead of using an arbitrary name.
• using describe blocks in place of it() blocks is pretty much a deal-breaker. This usage is not idiomatic, so it's setting people up for frustration.
• This leaves us open to expect({markdown, scope}).toMatchVisualSnapshot(); usage (rather than usage via visualSnapshots({markdown, scope}). Having two APIs to achieve the same effect is confusing.

It feels like at its core, we're trying to cover two distinct use cases:

1. turn markdown into one or more test cases
2. visual regression test a react element (tree) across one or more environments.

I suspect we'll want to restructure Sosia's internals to decouple these responsibilities.