codeamigo-jest-lite

jest-lite

Run Jest in the browser.

Why create this?

Codesandbox allows you to write Jest and execute the tests right in their environment. Getting this to work took a bit of research as Jest is typically meant to be ran in a Node environment. The Codesandbox team however didn't open-source their solution so I decided to write my own, for two reasons:

• Create a way to use Jest in any code sandboxing environment. Show me how
• Give code sandbox maintainers a bare-bone example that shows how you can implement Jest testing into your own code sandboxing solution.

Modules

This library consists of three seperate modules which extend eachother's functionality:

core

All core testing utilities. (source) (79kb gzipped)

• NPM: import * as core from 'jest-lite';
• CDN: http://unpkg.com/jest-lite@1.0.0-alpha.4/dist/core.js

enzyme

Testing utilities for testing with Enzyme. (source) (180kb gzipped)

To be able to use this module you will need to include your preferred version of React and ReactDOM.

• NPM: import * as enzyme from 'jest-lite/dist/enzyme';
• CDN: http://unpkg.com/jest-lite@1.0.0-alpha.4/dist/enzyme.js

prettify

The core module spits out the test results in JSON format. This module gives you an easy way to prettify that output for use on a HTML page. (source)

• prettify.js (37kb gzipped)
  • NPM: import * as prettify from 'jest-lite/dist/prettify';
  • CDN: http://unpkg.com/jest-lite@1.0.0-alpha.4/dist/prettify.js
• prettify.css (376b gzipped)
  • NPM: node_modules/jest-lite/dist/prettify.css
  • CDN: http://unpkg.com/jest-lite@1.0.0-alpha.4/dist/prettify.css

Examples

Basic Usage (NPM)

Check out this example on RunKit.

import {describe, it, expect, run} from 'jest-lite';

function sum(x: number, y: number) {
  return x + y;
}

describe('sum', () => {
  it('adds the two given numbers', () => {
    expect(sum(2, 2)).toBe(4);
  });
});

const result = await run();
console.log(result);

Testing React and Prettifying Output (CDN)

Check out this example on Codepen.

<style>
  html,
  body {
    margin: 0;
    height: 100%;
  }
</style>
<link
  rel="stylesheet"
  href="http://unpkg.com/jest-lite@1.0.0-alpha.4/dist/prettify.css"
/>
<script
  crossorigin
  src="https://unpkg.com/react@16/umd/react.production.min.js"
></script>
<script
  crossorigin
  src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
></script>
<script
  crossorigin
  src="http://unpkg.com/jest-lite@1.0.0-alpha.4/dist/core.js"
></script>
<script
  crossorigin
  src="http://unpkg.com/jest-lite@1.0.0-alpha.4/dist/enzyme.js"
></script>
<script
  crossorigin
  src="http://unpkg.com/jest-lite@1.0.0-alpha.4/dist/prettify.js"
></script>
<script>
  const {
    core: {describe, it, expect, run},
    enzyme: {mount},
    prettify,
  } = window.jestLite;

  function Button({children}) {
    return React.createElement('button', null, children);
  }

  describe('<Button />', () => {
    it('renders children', () => {
      const text = 'Click me!';
      // If you're using a transpiler like Babel
      // React.createElement would be replaced with your JSX:
      // <Button>{text}</Button>
      const button = mount(React.createElement(Button, {}, text));
      expect(button.text()).toBe(text);
    });

    it('renders as a link', () => {
      const button = mount(React.createElement(Button, {}, null));
      expect(button.find('a').exists()).toBe(true);
    });

    it('renders as a button', () => {
      const button = mount(React.createElement(Button, {}, null));
      expect(button.find('button').exists()).toBe(true);
    });
  });

  prettify.toHTML(run(), document.body);
</script>

🏗 Contributing

1. Make your changes and debug them using the examples (yarn dev).
2. Lint your changes using yarn lint.
3. Create a PR.