LUIS (List of UIs) helpers for Visual Studio Code

Luis allows you to develop, test and preview your React components. It also gives you full power to view your saved snapshots as well as view live preview of currently rendered snapshots from Visual Studio Code. The Extension for Visual Studio Code comes with two awesome functionalities:

Live Snapshot Preview

You can visualise current snapshot directly in Code environment. Just press CMD + P and search from Luis: View Live snapshots. The snapshot will automatically load snapshots from the current test.

To make this work you need to do following:

1. In your project yarn add jest-spy-serialiser
2. In your jest startup file, e.g. jest.config.js just insert following require('jest-spy-serialiser').registerSpy();
3. Profit

Stored Snapshot Preview

You can view all snapshots that are stored in your project folder. Just press CMD + P and search from Luis: View Stored snapshots.

UI Frameworks and extra CSS

If you need to add extra style sheet to your snapshots, either generated by webpack, or for example BootStrap, you can use workspace setting snapshots.css = "<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js' rel='stylesheet' type='text/css'>". Semantic UI is used by default, If this raise issues, let me know.

Styled Components Hack

In case you are using styled-components and you want to render also their styles, you need to hack a bit including following. In your test file:

import 'jest-styled-components'

And in your jest startup file (until this issue is resolved):

const css = require('css');
const stringify = css.stringify;

css.stringify = ast => {
  let result = stringify(ast);
  result = `<style>\n${result}</style>`;
  return result;
};