1.js

//do not test like this please!
test("Form component value", () => {
  //Props with sample data
  const props = {
    defaultValue: "Food",
    className: "wp-blocks-tooths",
    id: "something"
  };

  //Render component
  const component = TestRenderer.create(<Form {...props} />);
  //Get root node
  const testInstance = component.root;
  //Find input
  const input = testInstance.findByProps({ className: "isoblock-field" }).
  expect(
      input.props.value
  ).toEqual("Food");
});

2.js

//use snapshots!
test("Form component", () => {
  //Props with sample data
  const props = {
    defaultValue: "Tooths",
    className: "wp-blocks-tooths",
    id: "something"
  };

  const component = TestRenderer.create(<Form {...props} />);
  expect(component.toJSON()).toMatchSnapshot();
});

20.js

//Functions to test:
import { save, edit } from "./index";
//Import a renderer to test with
import TestRenderer from "react-test-renderer";
//We will use this to make edit/save rendereable
import { createElement } from "@wordpress/element";

test("Block edit callback", () => {
 
});

test("Block save callback", () => {
 
});

21.js

test("Block edit callback", () => {
  //Props with sample data
  const props = {
    attributes: {
      defaultValue: "Faces",
      blockId: ""
    },
    className: "wp-blocks-tooths",
    clientId: "something",
    setAttributes: jest.fn()
  };

  const component = TestRenderer.create(createElement(edit, props));
  expect(component.toJSON()).toMatchSnapshot();
});

22.js

test("Block save callback", () => {
  //Props with sample data
  const props = {
    attributes: {
      defaultValue: "Faces",
      blockId: ""
    },
    className: "wp-blocks-tooths",
    clientId: "something"
  };

  const component = TestRenderer.create(createElement(save, props));
  expect(component.toJSON()).toMatchSnapshot();
});

25.js

class BlockEditorWithOutWordPress extends React.Component {
  constructor(props) {
    super(props);

    //Setup state to match attributes of block
    this.state = {
      defaultValue: "Food"
    };
    
    //Create setAttributes to update state
    const setAttributes = attributes => this.setState(attributes);
  }

  //Render editor of block
  render() {
    return (
      <div>
        {React.createElement(edit, {
          setAttributes: this.setAttributes,
          attributes: this.state
        })}
      </div>
    );
  }
}

4.js

import FormPreview form "..."

const Editor = () => <div>Editor Coming Soon</div>.

export const FormEditor = ({form,onChange}) => {
  return (<div><FormPreview form={form}><Editor {...{form,onChange}} /></div>
}

5.js

registerBlockType(name, {
  title: "Hydrate Demo",
  attributes,
  category: "common",
  edit(props) => {
      //...
  },
  save (props){
    //...
  };
});

6.js

/**
 * Edit callback for block
 */
export const edit = ({ attributes, setAttributes, className, clientId }) => {
  const { defaultValue, blockId } = attributes;
  const setDefaultValue = defaultValue => setAttributes({ defaultValue });
  const setBlockId = blockId => setAttributes({ blockId });
  if (clientId !== blockId) {
    setBlockId(clientId);
  }
  return (
    <div>
      <InspectorControls>
        <TextControl
          onChange={setDefaultValue}
          label={"Default Value For Form Field"}
          value={defaultValue}
        />
      </InspectorControls>
      <Form
        defaultValue={defaultValue}
        className={className}
        id={clientId}
        onChange={event => {
          console.log(event);
          setDefaultValue(event.target.value);
        }}
      />
    </div>
  );
};

7.js

/**
 * Save callback for block
 */
export const save = props => {
  const { attributes, className, clientId } = props;
  const { defaultValue, blockId } = attributes;
  return (
    <Form defaultValue={defaultValue} className={className} id={blockId} />
  );
};

8.js

const name = "josh/isoblock";
registerBlockType(name, {
  title: "Hydrate Demo",
  attributes,
  category: "common",
  edit,
  save
});

9.js

//Import component to test
import { Form } from "./Form";
//Import a renderer to test with
import TestRenderer from "react-test-renderer";

test("Form component", () => {
  //Do some tests here
});

A.js

export const A = () => <div>A</div>;

B.js

import {A} from './A'

export const B = () => <div><p>B</p><A/></div>;

basic-expect.js

function increaseByFive(number) {
	return number + 5;
}

test('It works with negative numbers', () => {
	expect(increaseByFive(-10)).toBe(5);
});

install-react-tr.sh

# Install with Yarn:
yarn add react-test-renderer --dev

# Or with NPM:
npm i react-test-renderer --dev --save

scripts.json

{
  "scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start",
    "test:unit": "wp-scripts test-unit-js"
  }
}

snapshot.js

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Form component 1`] = `
<form
  className="wp-blocks-tooths"
>
  <div>
    <label
      htmlFor="something"
    >
      Form Field
    </label>
    <input
      className="isoblock-field"
      id="something"
      value="Tooths"
    />
  </div>
</form>
`;