diff --git a/src/rendering/Box/__snapshots__/test.js.snap b/src/rendering/Box/__snapshots__/test.js.snap
new file mode 100644
index 0000000..b20eee2
--- /dev/null
+++ b/src/rendering/Box/__snapshots__/test.js.snap
@@ -0,0 +1,329 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Box layout 1`] = `
+Object {
+  "box": Object {
+    "axisX1": 0,
+    "axisX2": 110,
+    "axisY": 30,
+    "height": 60,
+    "width": 110,
+  },
+  "children": Array [
+    Object {
+      "box": Object {
+        "axisX1": 5,
+        "axisX2": 95,
+        "axisY": 10,
+        "height": 50,
+        "width": 100,
+      },
+    },
+  ],
+  "props": Object {
+    "contentTransform": "translate(5 5)",
+    "height": 60,
+    "labelTransform": "translate(0 NaN)",
+    "rectTransform": "translate(0 0)",
+    "width": 110,
+  },
+}
+`;
+
+exports[`Box layout using axis anchors from child 1`] = `
+Object {
+  "box": Object {
+    "axisX1": 10,
+    "axisX2": 100,
+    "axisY": 15,
+    "height": 60,
+    "width": 110,
+  },
+  "children": Array [
+    Object {
+      "box": Object {
+        "axisX1": 5,
+        "axisX2": 95,
+        "axisY": 10,
+        "height": 50,
+        "width": 100,
+      },
+    },
+  ],
+  "props": Object {
+    "contentTransform": "translate(5 5)",
+    "height": 60,
+    "labelTransform": "translate(0 NaN)",
+    "rectTransform": "translate(0 0)",
+    "useAnchors": true,
+    "width": 110,
+  },
+}
+`;
+
+exports[`Box layout with a label and using axis anchors from child 1`] = `
+Object {
+  "box": Object {
+    "axisX1": 55,
+    "axisX2": 145,
+    "axisY": 25,
+    "height": 70,
+    "width": 200,
+  },
+  "children": Array [
+    Object {
+      "box": Object {
+        "axisX1": 5,
+        "axisX2": 95,
+        "axisY": 10,
+        "height": 50,
+        "width": 100,
+      },
+    },
+  ],
+  "props": Object {
+    "contentTransform": "translate(50 15)",
+    "height": 60,
+    "label": "Test label",
+    "labelTransform": "translate(0 10)",
+    "rectTransform": "translate(0 10)",
+    "useAnchors": true,
+    "width": 200,
+  },
+}
+`;
+
+exports[`Box layout with a label that is narrower than the box 1`] = `
+Object {
+  "box": Object {
+    "axisX1": 0,
+    "axisX2": 110,
+    "axisY": 40,
+    "height": 70,
+    "width": 110,
+  },
+  "children": Array [
+    Object {
+      "box": Object {
+        "axisX1": 5,
+        "axisX2": 95,
+        "axisY": 10,
+        "height": 50,
+        "width": 100,
+      },
+    },
+  ],
+  "props": Object {
+    "contentTransform": "translate(5 15)",
+    "height": 60,
+    "label": "Test label",
+    "labelTransform": "translate(0 10)",
+    "rectTransform": "translate(0 10)",
+    "width": 110,
+  },
+}
+`;
+
+exports[`Box layout with a label that is wider than the box 1`] = `
+Object {
+  "box": Object {
+    "axisX1": 0,
+    "axisX2": 200,
+    "axisY": 40,
+    "height": 70,
+    "width": 200,
+  },
+  "children": Array [
+    Object {
+      "box": Object {
+        "axisX1": 5,
+        "axisX2": 95,
+        "axisY": 10,
+        "height": 50,
+        "width": 100,
+      },
+    },
+  ],
+  "props": Object {
+    "contentTransform": "translate(50 15)",
+    "height": 60,
+    "label": "Test label",
+    "labelTransform": "translate(0 10)",
+    "rectTransform": "translate(0 10)",
+    "width": 200,
+  },
+}
+`;
+
+exports[`Box rendering 1`] = `
+<Fragment>
+  <rect
+    rx={3}
+    ry={3}
+  />
+  <g>
+    Example
+  </g>
+</Fragment>
+`;
+
+exports[`Box rendering with a corner radius 1`] = `
+<Fragment>
+  <rect
+    rx={5}
+    ry={5}
+  />
+  <g>
+    Example
+  </g>
+</Fragment>
+`;
+
+exports[`Box rendering with a label 1`] = `
+<Fragment>
+  <rect
+    rx={3}
+    ry={3}
+  />
+  <text
+    style={
+      Object {
+        "fontFamily": "Arial",
+        "fontSize": "12px",
+      }
+    }
+  >
+    Test box
+  </text>
+  <g>
+    Example
+  </g>
+</Fragment>
+`;
+
+exports[`Box rendering with props from layout 1`] = `
+<Fragment>
+  <rect
+    height={50}
+    rx={3}
+    ry={3}
+    style={
+      Object {
+        "fill": "#dae9e5",
+        "stroke": "#6b6659",
+        "strokeWidth": "1px",
+      }
+    }
+    transform="RECT TRANSFORM"
+    width={100}
+  />
+  <text
+    style={
+      Object {
+        "fontFamily": "Arial",
+        "fontSize": "12px",
+      }
+    }
+    transform="LABEL TRANSFORM"
+  >
+    Test box
+  </text>
+  <g
+    transform="CONTENT TRANSFORM"
+  >
+    Example
+  </g>
+</Fragment>
+`;
+
+exports[`Box themes rendering a "anchor" Box 1`] = `
+<Fragment>
+  <rect
+    rx={3}
+    ry={3}
+    style={
+      Object {
+        "fill": "#6b6659",
+      }
+    }
+  />
+  <g>
+    Example
+  </g>
+</Fragment>
+`;
+
+exports[`Box themes rendering a "capture" Box 1`] = `
+<Fragment>
+  <rect
+    rx={3}
+    ry={3}
+    style={
+      Object {
+        "fillOpacity": 0,
+        "stroke": "#908c83",
+        "strokeDasharray": "6,2",
+        "strokeWidth": "2px",
+      }
+    }
+  />
+  <g>
+    Example
+  </g>
+</Fragment>
+`;
+
+exports[`Box themes rendering a "charClass" Box 1`] = `
+<Fragment>
+  <rect
+    rx={3}
+    ry={3}
+    style={
+      Object {
+        "fill": "#cbcbba",
+      }
+    }
+  />
+  <g>
+    Example
+  </g>
+</Fragment>
+`;
+
+exports[`Box themes rendering a "escape" Box 1`] = `
+<Fragment>
+  <rect
+    rx={3}
+    ry={3}
+    style={
+      Object {
+        "fill": "#bada55",
+        "stroke": "#6b6659",
+        "strokeWidth": "1px",
+      }
+    }
+  />
+  <g>
+    Example
+  </g>
+</Fragment>
+`;
+
+exports[`Box themes rendering a "literal" Box 1`] = `
+<Fragment>
+  <rect
+    rx={3}
+    ry={3}
+    style={
+      Object {
+        "fill": "#dae9e5",
+        "stroke": "#6b6659",
+        "strokeWidth": "1px",
+      }
+    }
+  />
+  <g>
+    Example
+  </g>
+</Fragment>
+`;
diff --git a/src/rendering/Box/test.js b/src/rendering/Box/test.js
new file mode 100644
index 0000000..2fc884e
--- /dev/null
+++ b/src/rendering/Box/test.js
@@ -0,0 +1,185 @@
+jest.mock('rendering/getbbox', () => jest.fn());
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import getBBox from 'rendering/getbbox';
+
+import Box, { layout } from 'rendering/Box';
+
+describe('Box', () => {
+  test('rendering', () => {
+    const component = shallow(
+      <Box>Example</Box>
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  test('rendering with a corner radius', () => {
+    const component = shallow(
+      <Box radius={ 5 }>Example</Box>
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  test('rendering with a label', () => {
+    const component = shallow(
+      <Box label="Test box">Example</Box>
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  test('rendering with props from layout', () => {
+    const props = {
+      theme: 'literal',
+      label: 'Test box',
+      width: 100,
+      height: 50,
+      rectTransform: 'RECT TRANSFORM',
+      labelTransform: 'LABEL TRANSFORM',
+      contentTransform: 'CONTENT TRANSFORM'
+    };
+    const component = shallow(
+      <Box { ...props }>Example</Box>
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  describe('themes', () => {
+    test('rendering a "literal" Box', () => {
+      const component = shallow(
+        <Box theme="literal">Example</Box>
+      );
+      expect(component).toMatchSnapshot();
+    });
+
+    test('rendering a "escape" Box', () => {
+      const component = shallow(
+        <Box theme="escape">Example</Box>
+      );
+      expect(component).toMatchSnapshot();
+    });
+
+    test('rendering a "charClass" Box', () => {
+      const component = shallow(
+        <Box theme="charClass">Example</Box>
+      );
+      expect(component).toMatchSnapshot();
+    });
+
+    test('rendering a "capture" Box', () => {
+      const component = shallow(
+        <Box theme="capture">Example</Box>
+      );
+      expect(component).toMatchSnapshot();
+    });
+
+    test('rendering a "anchor" Box', () => {
+      const component = shallow(
+        <Box theme="anchor">Example</Box>
+      );
+      expect(component).toMatchSnapshot();
+    });
+  });
+
+  test('layout', () => {
+    const processed = layout({
+      children: [
+        {
+          box: {
+            width: 100,
+            height: 50,
+            axisY: 10,
+            axisX1: 5,
+            axisX2: 95
+          }
+        }
+      ]
+    });
+    expect(processed).toMatchSnapshot();
+  });
+
+  test('layout using axis anchors from child', () => {
+    const processed = layout({
+      props: {
+        useAnchors: true
+      },
+      children: [
+        {
+          box: {
+            width: 100,
+            height: 50,
+            axisY: 10,
+            axisX1: 5,
+            axisX2: 95
+          }
+        }
+      ]
+    });
+    expect(processed).toMatchSnapshot();
+  });
+
+  test('layout with a label that is narrower than the box', () => {
+    getBBox.mockReturnValue({ y: -10, width: 50, height: 10 });
+    const processed = layout({
+      props: {
+        label: 'Test label'
+      },
+      children: [
+        {
+          box: {
+            width: 100,
+            height: 50,
+            axisY: 10,
+            axisX1: 5,
+            axisX2: 95
+          }
+        }
+      ]
+    });
+    expect(processed).toMatchSnapshot();
+  });
+
+  test('layout with a label that is wider than the box', () => {
+    getBBox.mockReturnValue({ y: -10, width: 200, height: 10 });
+    const processed = layout({
+      props: {
+        label: 'Test label'
+      },
+      children: [
+        {
+          box: {
+            width: 100,
+            height: 50,
+            axisY: 10,
+            axisX1: 5,
+            axisX2: 95
+          }
+        }
+      ]
+    });
+    expect(processed).toMatchSnapshot();
+  });
+
+  test('layout with a label and using axis anchors from child', () => {
+    getBBox.mockReturnValue({ y: -10, width: 200, height: 10 });
+    const processed = layout({
+      props: {
+        label: 'Test label',
+        useAnchors: true
+      },
+      children: [
+        {
+          box: {
+            width: 100,
+            height: 50,
+            axisY: 10,
+            axisX1: 5,
+            axisX2: 95
+          }
+        }
+      ]
+    });
+    expect(processed).toMatchSnapshot();
+  });
+});