jest-lite CDN Example

jest-lite-cdn-example.markdown

jest-lite CDN Example

A Pen by Koen Vendrik on CodePen.

License.

script.babel

const {
  core: { describe, it, expect, run },
  enzyme: { mount },
  prettify
} = window.jestLite;

function Button({ children }) {
  return <button>{children}</button>;
}

describe("<Button />", () => {
  it("renders children", () => {
    const text = "Click me!";
    const button = mount(<Button>{text}</Button>);
    expect(button.text()).toBe(text);
  });

  it("renders as a link", () => {
    const button = mount(<Button />);
    expect(button.find("a").exists()).toBe(true);
  });

  it("renders as a button", () => {
    const button = mount(<Button />);
    expect(button.find("button").exists()).toBe(true);
  });
});

prettify.toHTML(run(), document.body);

scripts

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/jest-lite@1.0.0-alpha.4/dist/core.js"></script>
<script src="https://unpkg.com/jest-lite@1.0.0-alpha.4/dist/enzyme.js"></script>
<script src="https://unpkg.com/jest-lite@1.0.0-alpha.4/dist/prettify.js"></script>

style.css

html,
body {
  margin: 0;
  height: 100%;
}

styles

<link href="https://unpkg.com/jest-lite@1.0.0-alpha.4/dist/prettify.css" rel="stylesheet" />