diff --git a/frontend/package.json b/frontend/package.json
index 8565c0a304..e971fc6d5d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -51,8 +51,9 @@
     "babel-preset-stage-2": "^6.13.0",
     "css-loader": "^1.0.0",
     "debug": "^3.1.0",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme": "^3.5.0",
+    "enzyme-adapter-react-16": "^1.3.0",
+    "enzyme-to-json": "^3.3.4",
     "eslint": "^4.19.1",
     "eslint-config-finn": "^3.0.0",
     "eslint-config-finn-prettier": "^3.0.1",
@@ -98,7 +99,8 @@
     "setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.js",
     "setupFiles": [
       "<rootDir>/jest-setup.js"
-    ]
+    ],
+    "snapshotSerializers": ["enzyme-to-json/serializer"]
   },
   "greenkeeper": {
     "ignore": [
diff --git a/frontend/src/component/feature/form/__tests__/__snapshots__/form-add-feature-component-test.jsx.snap b/frontend/src/component/feature/form/__tests__/__snapshots__/form-add-feature-component-test.jsx.snap
index 4a227d65b9..28a3cc0b92 100644
--- a/frontend/src/component/feature/form/__tests__/__snapshots__/form-add-feature-component-test.jsx.snap
+++ b/frontend/src/component/feature/form/__tests__/__snapshots__/form-add-feature-component-test.jsx.snap
@@ -1,791 +1,81 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`render the create feature page 1`] = `
-ShallowWrapper {
-  "length": 1,
-  Symbol(enzyme.__root__): [Circular],
-  Symbol(enzyme.__unrendered__): <AddFeatureComponent
-    addStrategy={[MockFunction]}
-    initCallRequired={false}
-    input={
-      Object {
-        "description": "Description",
-        "enabled": false,
-        "name": "feature",
-        "nameError": Object {},
-      }
-    }
-    moveStrategy={[MockFunction]}
-    onCancel={[MockFunction]}
-    onSubmit={
-      [MockFunction] {
-        "calls": Array [
-          Array [
-            Object {
-              "description": "Description",
-              "enabled": false,
-              "name": "feature",
-              "nameError": Object {},
-            },
-          ],
-        ],
-        "results": Array [
-          Object {
-            "isThrow": false,
-            "value": undefined,
-          },
-        ],
-      }
-    }
-    removeStrategy={[MockFunction]}
-    setValue={[MockFunction]}
-    title="title"
-    updateStrategy={[MockFunction]}
-    validateName={[MockFunction]}
-  />,
-  Symbol(enzyme.__renderer__): Object {
-    "batchedUpdates": [Function],
-    "getNode": [Function],
-    "render": [Function],
-    "simulateEvent": [Function],
-    "unmount": [Function],
-  },
-  Symbol(enzyme.__node__): Object {
-    "instance": null,
-    "key": undefined,
-    "nodeType": "host",
-    "props": Object {
-      "children": Array [
-        <react-mdl-CardTitle
-          style={
-            Object {
-              "paddingTop": "24px",
-              "wordBreak": "break-all",
-            }
-          }
-        >
-          Create feature toggle
-        </react-mdl-CardTitle>,
-        <form>
-          <section
-            style={
-              Object {
-                "padding": "16px",
-              }
-            }
-          >
-            <react-mdl-Textfield
-              error={Object {}}
-              floatingLabel={true}
-              label="Name"
-              name="name"
-              onBlur={[Function]}
-              onChange={[Function]}
-              required={true}
-              value="feature"
-            />
-            <react-mdl-Textfield
-              floatingLabel={true}
-              label="Description"
-              onChange={[Function]}
-              required={true}
-              rows={1}
-              style={
-                Object {
-                  "width": "100%",
-                }
-              }
-              value="Description"
-            />
-            <div>
-              <br />
-              <react-mdl-Switch
-                checked={false}
-                onChange={[Function]}
-              >
-                Enabled
-              </react-mdl-Switch>
-              <hr />
-            </div>
-            <StrategiesSection
-              addStrategy={[MockFunction]}
-              configuredStrategies={Array []}
-              moveStrategy={[MockFunction]}
-              removeStrategy={[MockFunction]}
-              updateStrategy={[MockFunction]}
-            />
-            <br />
-          </section>
-          <react-mdl-CardActions>
-            <FormButtons
-              onCancel={[MockFunction]}
-              submitText="Create"
-            />
-          </react-mdl-CardActions>
-        </form>,
-      ],
-      "className": "fullwidth",
-      "shadow": 0,
-      "style": Object {
-        "overflow": "visible",
-      },
-    },
-    "ref": null,
-    "rendered": Array [
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "host",
-        "props": Object {
-          "children": "Create feature toggle",
-          "style": Object {
-            "paddingTop": "24px",
-            "wordBreak": "break-all",
-          },
-        },
-        "ref": null,
-        "rendered": "Create feature toggle",
-        "type": "react-mdl-CardTitle",
-      },
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "host",
-        "props": Object {
-          "children": Array [
-            <section
-              style={
-                Object {
-                  "padding": "16px",
-                }
-              }
-            >
-              <react-mdl-Textfield
-                error={Object {}}
-                floatingLabel={true}
-                label="Name"
-                name="name"
-                onBlur={[Function]}
-                onChange={[Function]}
-                required={true}
-                value="feature"
-              />
-              <react-mdl-Textfield
-                floatingLabel={true}
-                label="Description"
-                onChange={[Function]}
-                required={true}
-                rows={1}
-                style={
-                  Object {
-                    "width": "100%",
-                  }
-                }
-                value="Description"
-              />
-              <div>
-                <br />
-                <react-mdl-Switch
-                  checked={false}
-                  onChange={[Function]}
-                >
-                  Enabled
-                </react-mdl-Switch>
-                <hr />
-              </div>
-              <StrategiesSection
-                addStrategy={[MockFunction]}
-                configuredStrategies={Array []}
-                moveStrategy={[MockFunction]}
-                removeStrategy={[MockFunction]}
-                updateStrategy={[MockFunction]}
-              />
-              <br />
-            </section>,
-            <react-mdl-CardActions>
-              <FormButtons
-                onCancel={[MockFunction]}
-                submitText="Create"
-              />
-            </react-mdl-CardActions>,
-          ],
-          "onSubmit": undefined,
-        },
-        "ref": null,
-        "rendered": Array [
-          Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "host",
-            "props": Object {
-              "children": Array [
-                <react-mdl-Textfield
-                  error={Object {}}
-                  floatingLabel={true}
-                  label="Name"
-                  name="name"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  required={true}
-                  value="feature"
-                />,
-                <react-mdl-Textfield
-                  floatingLabel={true}
-                  label="Description"
-                  onChange={[Function]}
-                  required={true}
-                  rows={1}
-                  style={
-                    Object {
-                      "width": "100%",
-                    }
-                  }
-                  value="Description"
-                />,
-                <div>
-                  <br />
-                  <react-mdl-Switch
-                    checked={false}
-                    onChange={[Function]}
-                  >
-                    Enabled
-                  </react-mdl-Switch>
-                  <hr />
-                </div>,
-                <StrategiesSection
-                  addStrategy={[MockFunction]}
-                  configuredStrategies={Array []}
-                  moveStrategy={[MockFunction]}
-                  removeStrategy={[MockFunction]}
-                  updateStrategy={[MockFunction]}
-                />,
-                <br />,
-              ],
-              "style": Object {
-                "padding": "16px",
-              },
-            },
-            "ref": null,
-            "rendered": Array [
-              Object {
-                "instance": null,
-                "key": undefined,
-                "nodeType": "host",
-                "props": Object {
-                  "error": Object {},
-                  "floatingLabel": true,
-                  "label": "Name",
-                  "name": "name",
-                  "onBlur": [Function],
-                  "onChange": [Function],
-                  "required": true,
-                  "value": "feature",
-                },
-                "ref": null,
-                "rendered": null,
-                "type": "react-mdl-Textfield",
-              },
-              Object {
-                "instance": null,
-                "key": undefined,
-                "nodeType": "host",
-                "props": Object {
-                  "floatingLabel": true,
-                  "label": "Description",
-                  "onChange": [Function],
-                  "required": true,
-                  "rows": 1,
-                  "style": Object {
-                    "width": "100%",
-                  },
-                  "value": "Description",
-                },
-                "ref": null,
-                "rendered": null,
-                "type": "react-mdl-Textfield",
-              },
-              Object {
-                "instance": null,
-                "key": undefined,
-                "nodeType": "host",
-                "props": Object {
-                  "children": Array [
-                    <br />,
-                    <react-mdl-Switch
-                      checked={false}
-                      onChange={[Function]}
-                    >
-                      Enabled
-                    </react-mdl-Switch>,
-                    <hr />,
-                  ],
-                },
-                "ref": null,
-                "rendered": Array [
-                  Object {
-                    "instance": null,
-                    "key": undefined,
-                    "nodeType": "host",
-                    "props": Object {},
-                    "ref": null,
-                    "rendered": null,
-                    "type": "br",
-                  },
-                  Object {
-                    "instance": null,
-                    "key": undefined,
-                    "nodeType": "host",
-                    "props": Object {
-                      "checked": false,
-                      "children": "Enabled",
-                      "onChange": [Function],
-                    },
-                    "ref": null,
-                    "rendered": "Enabled",
-                    "type": "react-mdl-Switch",
-                  },
-                  Object {
-                    "instance": null,
-                    "key": undefined,
-                    "nodeType": "host",
-                    "props": Object {},
-                    "ref": null,
-                    "rendered": null,
-                    "type": "hr",
-                  },
-                ],
-                "type": "div",
-              },
-              Object {
-                "instance": null,
-                "key": undefined,
-                "nodeType": "host",
-                "props": Object {
-                  "addStrategy": [MockFunction],
-                  "configuredStrategies": Array [],
-                  "moveStrategy": [MockFunction],
-                  "removeStrategy": [MockFunction],
-                  "updateStrategy": [MockFunction],
-                },
-                "ref": null,
-                "rendered": null,
-                "type": "StrategiesSection",
-              },
-              Object {
-                "instance": null,
-                "key": undefined,
-                "nodeType": "host",
-                "props": Object {},
-                "ref": null,
-                "rendered": null,
-                "type": "br",
-              },
-            ],
-            "type": "section",
-          },
-          Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "host",
-            "props": Object {
-              "children": <FormButtons
-                onCancel={[MockFunction]}
-                submitText="Create"
-              />,
-            },
-            "ref": null,
-            "rendered": Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "function",
-              "props": Object {
-                "onCancel": [MockFunction],
-                "submitText": "Create",
-              },
-              "ref": null,
-              "rendered": null,
-              "type": [Function],
-            },
-            "type": "react-mdl-CardActions",
-          },
-        ],
-        "type": "form",
-      },
-    ],
-    "type": "react-mdl-Card",
-  },
-  Symbol(enzyme.__nodes__): Array [
+<react-mdl-Card
+  className="fullwidth"
+  shadow={0}
+  style={
     Object {
-      "instance": null,
-      "key": undefined,
-      "nodeType": "host",
-      "props": Object {
-        "children": Array [
-          <react-mdl-CardTitle
-            style={
-              Object {
-                "paddingTop": "24px",
-                "wordBreak": "break-all",
-              }
-            }
-          >
-            Create feature toggle
-          </react-mdl-CardTitle>,
-          <form>
-            <section
-              style={
-                Object {
-                  "padding": "16px",
-                }
-              }
-            >
-              <react-mdl-Textfield
-                error={Object {}}
-                floatingLabel={true}
-                label="Name"
-                name="name"
-                onBlur={[Function]}
-                onChange={[Function]}
-                required={true}
-                value="feature"
-              />
-              <react-mdl-Textfield
-                floatingLabel={true}
-                label="Description"
-                onChange={[Function]}
-                required={true}
-                rows={1}
-                style={
-                  Object {
-                    "width": "100%",
-                  }
-                }
-                value="Description"
-              />
-              <div>
-                <br />
-                <react-mdl-Switch
-                  checked={false}
-                  onChange={[Function]}
-                >
-                  Enabled
-                </react-mdl-Switch>
-                <hr />
-              </div>
-              <StrategiesSection
-                addStrategy={[MockFunction]}
-                configuredStrategies={Array []}
-                moveStrategy={[MockFunction]}
-                removeStrategy={[MockFunction]}
-                updateStrategy={[MockFunction]}
-              />
-              <br />
-            </section>
-            <react-mdl-CardActions>
-              <FormButtons
-                onCancel={[MockFunction]}
-                submitText="Create"
-              />
-            </react-mdl-CardActions>
-          </form>,
-        ],
-        "className": "fullwidth",
-        "shadow": 0,
-        "style": Object {
-          "overflow": "visible",
-        },
-      },
-      "ref": null,
-      "rendered": Array [
+      "overflow": "visible",
+    }
+  }
+>
+  <react-mdl-CardTitle
+    style={
+      Object {
+        "paddingTop": "24px",
+        "wordBreak": "break-all",
+      }
+    }
+  >
+    Create feature toggle
+  </react-mdl-CardTitle>
+  <form>
+    <section
+      style={
         Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "children": "Create feature toggle",
-            "style": Object {
-              "paddingTop": "24px",
-              "wordBreak": "break-all",
-            },
-          },
-          "ref": null,
-          "rendered": "Create feature toggle",
-          "type": "react-mdl-CardTitle",
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "children": Array [
-              <section
-                style={
-                  Object {
-                    "padding": "16px",
-                  }
-                }
-              >
-                <react-mdl-Textfield
-                  error={Object {}}
-                  floatingLabel={true}
-                  label="Name"
-                  name="name"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  required={true}
-                  value="feature"
-                />
-                <react-mdl-Textfield
-                  floatingLabel={true}
-                  label="Description"
-                  onChange={[Function]}
-                  required={true}
-                  rows={1}
-                  style={
-                    Object {
-                      "width": "100%",
-                    }
-                  }
-                  value="Description"
-                />
-                <div>
-                  <br />
-                  <react-mdl-Switch
-                    checked={false}
-                    onChange={[Function]}
-                  >
-                    Enabled
-                  </react-mdl-Switch>
-                  <hr />
-                </div>
-                <StrategiesSection
-                  addStrategy={[MockFunction]}
-                  configuredStrategies={Array []}
-                  moveStrategy={[MockFunction]}
-                  removeStrategy={[MockFunction]}
-                  updateStrategy={[MockFunction]}
-                />
-                <br />
-              </section>,
-              <react-mdl-CardActions>
-                <FormButtons
-                  onCancel={[MockFunction]}
-                  submitText="Create"
-                />
-              </react-mdl-CardActions>,
-            ],
-            "onSubmit": undefined,
-          },
-          "ref": null,
-          "rendered": Array [
-            Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "host",
-              "props": Object {
-                "children": Array [
-                  <react-mdl-Textfield
-                    error={Object {}}
-                    floatingLabel={true}
-                    label="Name"
-                    name="name"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    required={true}
-                    value="feature"
-                  />,
-                  <react-mdl-Textfield
-                    floatingLabel={true}
-                    label="Description"
-                    onChange={[Function]}
-                    required={true}
-                    rows={1}
-                    style={
-                      Object {
-                        "width": "100%",
-                      }
-                    }
-                    value="Description"
-                  />,
-                  <div>
-                    <br />
-                    <react-mdl-Switch
-                      checked={false}
-                      onChange={[Function]}
-                    >
-                      Enabled
-                    </react-mdl-Switch>
-                    <hr />
-                  </div>,
-                  <StrategiesSection
-                    addStrategy={[MockFunction]}
-                    configuredStrategies={Array []}
-                    moveStrategy={[MockFunction]}
-                    removeStrategy={[MockFunction]}
-                    updateStrategy={[MockFunction]}
-                  />,
-                  <br />,
-                ],
-                "style": Object {
-                  "padding": "16px",
-                },
-              },
-              "ref": null,
-              "rendered": Array [
-                Object {
-                  "instance": null,
-                  "key": undefined,
-                  "nodeType": "host",
-                  "props": Object {
-                    "error": Object {},
-                    "floatingLabel": true,
-                    "label": "Name",
-                    "name": "name",
-                    "onBlur": [Function],
-                    "onChange": [Function],
-                    "required": true,
-                    "value": "feature",
-                  },
-                  "ref": null,
-                  "rendered": null,
-                  "type": "react-mdl-Textfield",
-                },
-                Object {
-                  "instance": null,
-                  "key": undefined,
-                  "nodeType": "host",
-                  "props": Object {
-                    "floatingLabel": true,
-                    "label": "Description",
-                    "onChange": [Function],
-                    "required": true,
-                    "rows": 1,
-                    "style": Object {
-                      "width": "100%",
-                    },
-                    "value": "Description",
-                  },
-                  "ref": null,
-                  "rendered": null,
-                  "type": "react-mdl-Textfield",
-                },
-                Object {
-                  "instance": null,
-                  "key": undefined,
-                  "nodeType": "host",
-                  "props": Object {
-                    "children": Array [
-                      <br />,
-                      <react-mdl-Switch
-                        checked={false}
-                        onChange={[Function]}
-                      >
-                        Enabled
-                      </react-mdl-Switch>,
-                      <hr />,
-                    ],
-                  },
-                  "ref": null,
-                  "rendered": Array [
-                    Object {
-                      "instance": null,
-                      "key": undefined,
-                      "nodeType": "host",
-                      "props": Object {},
-                      "ref": null,
-                      "rendered": null,
-                      "type": "br",
-                    },
-                    Object {
-                      "instance": null,
-                      "key": undefined,
-                      "nodeType": "host",
-                      "props": Object {
-                        "checked": false,
-                        "children": "Enabled",
-                        "onChange": [Function],
-                      },
-                      "ref": null,
-                      "rendered": "Enabled",
-                      "type": "react-mdl-Switch",
-                    },
-                    Object {
-                      "instance": null,
-                      "key": undefined,
-                      "nodeType": "host",
-                      "props": Object {},
-                      "ref": null,
-                      "rendered": null,
-                      "type": "hr",
-                    },
-                  ],
-                  "type": "div",
-                },
-                Object {
-                  "instance": null,
-                  "key": undefined,
-                  "nodeType": "host",
-                  "props": Object {
-                    "addStrategy": [MockFunction],
-                    "configuredStrategies": Array [],
-                    "moveStrategy": [MockFunction],
-                    "removeStrategy": [MockFunction],
-                    "updateStrategy": [MockFunction],
-                  },
-                  "ref": null,
-                  "rendered": null,
-                  "type": "StrategiesSection",
-                },
-                Object {
-                  "instance": null,
-                  "key": undefined,
-                  "nodeType": "host",
-                  "props": Object {},
-                  "ref": null,
-                  "rendered": null,
-                  "type": "br",
-                },
-              ],
-              "type": "section",
-            },
-            Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "host",
-              "props": Object {
-                "children": <FormButtons
-                  onCancel={[MockFunction]}
-                  submitText="Create"
-                />,
-              },
-              "ref": null,
-              "rendered": Object {
-                "instance": null,
-                "key": undefined,
-                "nodeType": "function",
-                "props": Object {
-                  "onCancel": [MockFunction],
-                  "submitText": "Create",
-                },
-                "ref": null,
-                "rendered": null,
-                "type": [Function],
-              },
-              "type": "react-mdl-CardActions",
-            },
-          ],
-          "type": "form",
-        },
-      ],
-      "type": "react-mdl-Card",
-    },
-  ],
-  Symbol(enzyme.__options__): Object {
-    "adapter": ReactSixteenAdapter {
-      "options": Object {
-        "enableComponentDidUpdateOnSetState": true,
-      },
-    },
-  },
-}
+          "padding": "16px",
+        }
+      }
+    >
+      <react-mdl-Textfield
+        error={Object {}}
+        floatingLabel={true}
+        label="Name"
+        name="name"
+        onBlur={[Function]}
+        onChange={[Function]}
+        required={true}
+        value="feature"
+      />
+      <react-mdl-Textfield
+        floatingLabel={true}
+        label="Description"
+        onChange={[Function]}
+        required={true}
+        rows={1}
+        style={
+          Object {
+            "width": "100%",
+          }
+        }
+        value="Description"
+      />
+      <div>
+        <br />
+        <react-mdl-Switch
+          checked={false}
+          onChange={[Function]}
+        >
+          Enabled
+        </react-mdl-Switch>
+        <hr />
+      </div>
+      <StrategiesSection
+        addStrategy={[MockFunction]}
+        configuredStrategies={Array []}
+        moveStrategy={[MockFunction]}
+        removeStrategy={[MockFunction]}
+        updateStrategy={[MockFunction]}
+      />
+      <br />
+    </section>
+    <react-mdl-CardActions>
+      <FormButtons
+        onCancel={[MockFunction]}
+        submitText="Create"
+      />
+    </react-mdl-CardActions>
+  </form>
+</react-mdl-Card>
 `;
diff --git a/frontend/src/component/feature/form/__tests__/__snapshots__/form-update-feature-component-test.jsx.snap b/frontend/src/component/feature/form/__tests__/__snapshots__/form-update-feature-component-test.jsx.snap
index b8ea8da99c..5ccf0a9d05 100644
--- a/frontend/src/component/feature/form/__tests__/__snapshots__/form-update-feature-component-test.jsx.snap
+++ b/frontend/src/component/feature/form/__tests__/__snapshots__/form-update-feature-component-test.jsx.snap
@@ -1,252 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`render the create feature page 1`] = `
-ShallowWrapper {
-  "length": 1,
-  Symbol(enzyme.__root__): [Circular],
-  Symbol(enzyme.__unrendered__): <UpdateFeatureComponent
-    addStrategy={[MockFunction]}
-    initCallRequired={false}
-    input={
+<form>
+  <section
+    style={
       Object {
-        "description": "Description",
-        "enabled": false,
-        "name": "feature",
-        "nameError": Object {},
+        "padding": "16px",
       }
     }
-    moveStrategy={[MockFunction]}
-    onCancel={[MockFunction]}
-    onSubmit={
-      [MockFunction] {
-        "calls": Array [
-          Array [
-            Object {
-              "description": "Description",
-              "enabled": false,
-              "name": "feature",
-              "nameError": Object {},
-            },
-            undefined,
-          ],
-        ],
-        "results": Array [
-          Object {
-            "isThrow": false,
-            "value": undefined,
-          },
-        ],
-      }
-    }
-    removeStrategy={[MockFunction]}
-    setValue={[MockFunction]}
-    title="title"
-    updateStrategy={[MockFunction]}
-    validateName={[MockFunction]}
-  />,
-  Symbol(enzyme.__renderer__): Object {
-    "batchedUpdates": [Function],
-    "getNode": [Function],
-    "render": [Function],
-    "simulateEvent": [Function],
-    "unmount": [Function],
-  },
-  Symbol(enzyme.__node__): Object {
-    "instance": null,
-    "key": undefined,
-    "nodeType": "host",
-    "props": Object {
-      "children": <section
-        style={
-          Object {
-            "padding": "16px",
-          }
-        }
-      >
-        <StrategiesSection
-          addStrategy={[MockFunction]}
-          configuredStrategies={Array []}
-          moveStrategy={[MockFunction]}
-          removeStrategy={[MockFunction]}
-          updateStrategy={[MockFunction]}
-        />
-        <br />
-        <FormButtons
-          onCancel={[MockFunction]}
-          submitText="Update"
-        />
-      </section>,
-      "onSubmit": undefined,
-    },
-    "ref": null,
-    "rendered": Object {
-      "instance": null,
-      "key": undefined,
-      "nodeType": "host",
-      "props": Object {
-        "children": Array [
-          <StrategiesSection
-            addStrategy={[MockFunction]}
-            configuredStrategies={Array []}
-            moveStrategy={[MockFunction]}
-            removeStrategy={[MockFunction]}
-            updateStrategy={[MockFunction]}
-          />,
-          <br />,
-          <FormButtons
-            onCancel={[MockFunction]}
-            submitText="Update"
-          />,
-        ],
-        "style": Object {
-          "padding": "16px",
-        },
-      },
-      "ref": null,
-      "rendered": Array [
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "addStrategy": [MockFunction],
-            "configuredStrategies": Array [],
-            "moveStrategy": [MockFunction],
-            "removeStrategy": [MockFunction],
-            "updateStrategy": [MockFunction],
-          },
-          "ref": null,
-          "rendered": null,
-          "type": "StrategiesSection",
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {},
-          "ref": null,
-          "rendered": null,
-          "type": "br",
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "function",
-          "props": Object {
-            "onCancel": [MockFunction],
-            "submitText": "Update",
-          },
-          "ref": null,
-          "rendered": null,
-          "type": [Function],
-        },
-      ],
-      "type": "section",
-    },
-    "type": "form",
-  },
-  Symbol(enzyme.__nodes__): Array [
-    Object {
-      "instance": null,
-      "key": undefined,
-      "nodeType": "host",
-      "props": Object {
-        "children": <section
-          style={
-            Object {
-              "padding": "16px",
-            }
-          }
-        >
-          <StrategiesSection
-            addStrategy={[MockFunction]}
-            configuredStrategies={Array []}
-            moveStrategy={[MockFunction]}
-            removeStrategy={[MockFunction]}
-            updateStrategy={[MockFunction]}
-          />
-          <br />
-          <FormButtons
-            onCancel={[MockFunction]}
-            submitText="Update"
-          />
-        </section>,
-        "onSubmit": undefined,
-      },
-      "ref": null,
-      "rendered": Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "host",
-        "props": Object {
-          "children": Array [
-            <StrategiesSection
-              addStrategy={[MockFunction]}
-              configuredStrategies={Array []}
-              moveStrategy={[MockFunction]}
-              removeStrategy={[MockFunction]}
-              updateStrategy={[MockFunction]}
-            />,
-            <br />,
-            <FormButtons
-              onCancel={[MockFunction]}
-              submitText="Update"
-            />,
-          ],
-          "style": Object {
-            "padding": "16px",
-          },
-        },
-        "ref": null,
-        "rendered": Array [
-          Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "host",
-            "props": Object {
-              "addStrategy": [MockFunction],
-              "configuredStrategies": Array [],
-              "moveStrategy": [MockFunction],
-              "removeStrategy": [MockFunction],
-              "updateStrategy": [MockFunction],
-            },
-            "ref": null,
-            "rendered": null,
-            "type": "StrategiesSection",
-          },
-          Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "host",
-            "props": Object {},
-            "ref": null,
-            "rendered": null,
-            "type": "br",
-          },
-          Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "function",
-            "props": Object {
-              "onCancel": [MockFunction],
-              "submitText": "Update",
-            },
-            "ref": null,
-            "rendered": null,
-            "type": [Function],
-          },
-        ],
-        "type": "section",
-      },
-      "type": "form",
-    },
-  ],
-  Symbol(enzyme.__options__): Object {
-    "adapter": ReactSixteenAdapter {
-      "options": Object {
-        "enableComponentDidUpdateOnSetState": true,
-      },
-    },
-  },
-}
+  >
+    <StrategiesSection
+      addStrategy={[MockFunction]}
+      configuredStrategies={Array []}
+      moveStrategy={[MockFunction]}
+      removeStrategy={[MockFunction]}
+      updateStrategy={[MockFunction]}
+    />
+    <br />
+    <FormButtons
+      onCancel={[MockFunction]}
+      submitText="Update"
+    />
+  </section>
+</form>
 `;
diff --git a/frontend/src/component/feature/form/__tests__/__snapshots__/strategy-add-test.jsx.snap b/frontend/src/component/feature/form/__tests__/__snapshots__/strategy-add-test.jsx.snap
index b0d06f4124..983315d52d 100644
--- a/frontend/src/component/feature/form/__tests__/__snapshots__/strategy-add-test.jsx.snap
+++ b/frontend/src/component/feature/form/__tests__/__snapshots__/strategy-add-test.jsx.snap
@@ -1,296 +1,49 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders add strategy form with a list of available strategies 1`] = `
-ShallowWrapper {
-  "length": 1,
-  Symbol(enzyme.__root__): [Circular],
-  Symbol(enzyme.__unrendered__): <AddStrategy
-    addStrategy={[MockFunction]}
-    fetchStrategies={[MockFunction]}
-    strategies={
-      Array [
-        Object {
-          "description": "Default on/off strategy.",
-          "editable": false,
-          "name": "default",
-          "parameters": Array [
-            "t",
-          ],
-        },
-      ]
-    }
-  />,
-  Symbol(enzyme.__renderer__): Object {
-    "batchedUpdates": [Function],
-    "getNode": [Function],
-    "render": [Function],
-    "simulateEvent": [Function],
-    "unmount": [Function],
-  },
-  Symbol(enzyme.__node__): Object {
-    "instance": null,
-    "key": undefined,
-    "nodeType": "host",
-    "props": Object {
-      "children": Array [
-        <react-mdl-IconButton
-          accent={true}
-          id="strategies-add"
-          name="add"
-          onClick={[Function]}
-          raised={true}
-          title="Add Strategy"
-        />,
-        <react-mdl-Menu
-          align="right"
-          ripple={true}
-          style={
-            Object {
-              "backgroundColor": "rgb(247, 248, 255)",
-              "maxHeight": "300px",
-              "overflowY": "auto",
-            }
-          }
-          target="strategies-add"
-          valign="bottom"
-        >
-          <react-mdl-MenuItem
-            disabled={true}
-          >
-            Add Strategy:
-          </react-mdl-MenuItem>
-          <react-mdl-MenuItem
-            onClick={[Function]}
-            title="Default on/off strategy."
-          >
-            default
-          </react-mdl-MenuItem>
-        </react-mdl-Menu>,
-      ],
-      "style": Object {
-        "display": "inline-block",
-        "height": "25px",
-        "position": "relative",
-        "width": "25px",
-      },
-    },
-    "ref": null,
-    "rendered": Array [
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "host",
-        "props": Object {
-          "accent": true,
-          "id": "strategies-add",
-          "name": "add",
-          "onClick": [Function],
-          "raised": true,
-          "title": "Add Strategy",
-        },
-        "ref": null,
-        "rendered": null,
-        "type": "react-mdl-IconButton",
-      },
-      Object {
-        "instance": null,
-        "key": undefined,
-        "nodeType": "host",
-        "props": Object {
-          "align": "right",
-          "children": Array [
-            <react-mdl-MenuItem
-              disabled={true}
-            >
-              Add Strategy:
-            </react-mdl-MenuItem>,
-            Array [
-              <react-mdl-MenuItem
-                onClick={[Function]}
-                title="Default on/off strategy."
-              >
-                default
-              </react-mdl-MenuItem>,
-            ],
-          ],
-          "ripple": true,
-          "style": Object {
-            "backgroundColor": "rgb(247, 248, 255)",
-            "maxHeight": "300px",
-            "overflowY": "auto",
-          },
-          "target": "strategies-add",
-          "valign": "bottom",
-        },
-        "ref": null,
-        "rendered": Array [
-          Object {
-            "instance": null,
-            "key": undefined,
-            "nodeType": "host",
-            "props": Object {
-              "children": "Add Strategy:",
-              "disabled": true,
-            },
-            "ref": null,
-            "rendered": "Add Strategy:",
-            "type": "react-mdl-MenuItem",
-          },
-          Object {
-            "instance": null,
-            "key": "default",
-            "nodeType": "host",
-            "props": Object {
-              "children": "default",
-              "onClick": [Function],
-              "title": "Default on/off strategy.",
-            },
-            "ref": null,
-            "rendered": "default",
-            "type": "react-mdl-MenuItem",
-          },
-        ],
-        "type": "react-mdl-Menu",
-      },
-    ],
-    "type": "div",
-  },
-  Symbol(enzyme.__nodes__): Array [
+<div
+  style={
     Object {
-      "instance": null,
-      "key": undefined,
-      "nodeType": "host",
-      "props": Object {
-        "children": Array [
-          <react-mdl-IconButton
-            accent={true}
-            id="strategies-add"
-            name="add"
-            onClick={[Function]}
-            raised={true}
-            title="Add Strategy"
-          />,
-          <react-mdl-Menu
-            align="right"
-            ripple={true}
-            style={
-              Object {
-                "backgroundColor": "rgb(247, 248, 255)",
-                "maxHeight": "300px",
-                "overflowY": "auto",
-              }
-            }
-            target="strategies-add"
-            valign="bottom"
-          >
-            <react-mdl-MenuItem
-              disabled={true}
-            >
-              Add Strategy:
-            </react-mdl-MenuItem>
-            <react-mdl-MenuItem
-              onClick={[Function]}
-              title="Default on/off strategy."
-            >
-              default
-            </react-mdl-MenuItem>
-          </react-mdl-Menu>,
-        ],
-        "style": Object {
-          "display": "inline-block",
-          "height": "25px",
-          "position": "relative",
-          "width": "25px",
-        },
-      },
-      "ref": null,
-      "rendered": Array [
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "accent": true,
-            "id": "strategies-add",
-            "name": "add",
-            "onClick": [Function],
-            "raised": true,
-            "title": "Add Strategy",
-          },
-          "ref": null,
-          "rendered": null,
-          "type": "react-mdl-IconButton",
-        },
-        Object {
-          "instance": null,
-          "key": undefined,
-          "nodeType": "host",
-          "props": Object {
-            "align": "right",
-            "children": Array [
-              <react-mdl-MenuItem
-                disabled={true}
-              >
-                Add Strategy:
-              </react-mdl-MenuItem>,
-              Array [
-                <react-mdl-MenuItem
-                  onClick={[Function]}
-                  title="Default on/off strategy."
-                >
-                  default
-                </react-mdl-MenuItem>,
-              ],
-            ],
-            "ripple": true,
-            "style": Object {
-              "backgroundColor": "rgb(247, 248, 255)",
-              "maxHeight": "300px",
-              "overflowY": "auto",
-            },
-            "target": "strategies-add",
-            "valign": "bottom",
-          },
-          "ref": null,
-          "rendered": Array [
-            Object {
-              "instance": null,
-              "key": undefined,
-              "nodeType": "host",
-              "props": Object {
-                "children": "Add Strategy:",
-                "disabled": true,
-              },
-              "ref": null,
-              "rendered": "Add Strategy:",
-              "type": "react-mdl-MenuItem",
-            },
-            Object {
-              "instance": null,
-              "key": "default",
-              "nodeType": "host",
-              "props": Object {
-                "children": "default",
-                "onClick": [Function],
-                "title": "Default on/off strategy.",
-              },
-              "ref": null,
-              "rendered": "default",
-              "type": "react-mdl-MenuItem",
-            },
-          ],
-          "type": "react-mdl-Menu",
-        },
-      ],
-      "type": "div",
-    },
-  ],
-  Symbol(enzyme.__options__): Object {
-    "adapter": ReactSixteenAdapter {
-      "options": Object {
-        "enableComponentDidUpdateOnSetState": true,
-      },
-    },
-  },
-}
+      "display": "inline-block",
+      "height": "25px",
+      "position": "relative",
+      "width": "25px",
+    }
+  }
+>
+  <react-mdl-IconButton
+    accent={true}
+    id="strategies-add"
+    name="add"
+    onClick={[Function]}
+    raised={true}
+    title="Add Strategy"
+  />
+  <react-mdl-Menu
+    align="right"
+    ripple={true}
+    style={
+      Object {
+        "backgroundColor": "rgb(247, 248, 255)",
+        "maxHeight": "300px",
+        "overflowY": "auto",
+      }
+    }
+    target="strategies-add"
+    valign="bottom"
+  >
+    <react-mdl-MenuItem
+      disabled={true}
+    >
+      Add Strategy:
+    </react-mdl-MenuItem>
+    <react-mdl-MenuItem
+      key="default"
+      onClick={[Function]}
+      title="Default on/off strategy."
+    >
+      default
+    </react-mdl-MenuItem>
+  </react-mdl-Menu>
+</div>
 `;
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 2f10c9417d..2caf5078e3 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -435,6 +435,14 @@ array-unique@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
 
+array.prototype.flat@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.1.tgz#812db8f02cad24d3fab65dd67eabe3b8903494a4"
+  dependencies:
+    define-properties "^1.1.2"
+    es-abstract "^1.10.0"
+    function-bind "^1.1.1"
+
 arrify@^1.0.0, arrify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
@@ -2579,40 +2587,48 @@ entities@^1.1.1, entities@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
 
-enzyme-adapter-react-16@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.1.1.tgz#a8f4278b47e082fbca14f5bfb1ee50ee650717b4"
+enzyme-adapter-react-16@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.3.0.tgz#4cfba44f8c27256d28e171bdf7a5b5aebce6041b"
   dependencies:
-    enzyme-adapter-utils "^1.3.0"
-    lodash "^4.17.4"
-    object.assign "^4.0.4"
+    enzyme-adapter-utils "^1.6.0"
+    function.prototype.name "^1.1.0"
+    object.assign "^4.1.0"
     object.values "^1.0.4"
-    prop-types "^15.6.0"
-    react-reconciler "^0.7.0"
+    prop-types "^15.6.2"
+    react-is "^16.4.2"
     react-test-renderer "^16.0.0-0"
 
-enzyme-adapter-utils@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/enzyme-adapter-utils/-/enzyme-adapter-utils-1.3.0.tgz#d6c85756826c257a8544d362cc7a67e97ea698c7"
+enzyme-adapter-utils@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/enzyme-adapter-utils/-/enzyme-adapter-utils-1.6.0.tgz#c59a3f311769fc4087489bff3ee98d8397682c75"
+  dependencies:
+    function.prototype.name "^1.1.0"
+    object.assign "^4.1.0"
+    prop-types "^15.6.2"
+
+enzyme-to-json@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/enzyme-to-json/-/enzyme-to-json-3.3.4.tgz#67c6040e931182f183418af2eb9f4323258aa77f"
   dependencies:
     lodash "^4.17.4"
-    object.assign "^4.0.4"
-    prop-types "^15.6.0"
 
-enzyme@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.3.0.tgz#0971abd167f2d4bf3f5bd508229e1c4b6dc50479"
+enzyme@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.5.0.tgz#fd452a698fd1352c737b641dd3a64e079f42d9d5"
   dependencies:
+    array.prototype.flat "^1.2.1"
     cheerio "^1.0.0-rc.2"
-    function.prototype.name "^1.0.3"
-    has "^1.0.1"
+    function.prototype.name "^1.1.0"
+    has "^1.0.3"
     is-boolean-object "^1.0.0"
-    is-callable "^1.1.3"
+    is-callable "^1.1.4"
     is-number-object "^1.0.3"
     is-string "^1.0.4"
     is-subset "^0.1.1"
-    lodash "^4.17.4"
-    object-inspect "^1.5.0"
+    lodash.escape "^4.0.1"
+    lodash.isequal "^4.5.0"
+    object-inspect "^1.6.0"
     object-is "^1.0.1"
     object.assign "^4.1.0"
     object.entries "^1.0.4"
@@ -2638,6 +2654,16 @@ error-stack-parser@^1.3.6:
   dependencies:
     stackframe "^0.3.1"
 
+es-abstract@^1.10.0:
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.12.0.tgz#9dbbdd27c6856f0001421ca18782d786bf8a6165"
+  dependencies:
+    es-to-primitive "^1.1.1"
+    function-bind "^1.1.1"
+    has "^1.0.1"
+    is-callable "^1.1.3"
+    is-regex "^1.0.4"
+
 es-abstract@^1.5.1, es-abstract@^1.6.1, es-abstract@^1.7.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.10.0.tgz#1ecb36c197842a00d8ee4c2dfd8646bb97d60864"
@@ -3325,7 +3351,7 @@ function-bind@^1.0.2, function-bind@^1.1.0, function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
 
-function.prototype.name@^1.0.3:
+function.prototype.name@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.0.tgz#8bd763cc0af860a859cc5d49384d74b932cd2327"
   dependencies:
@@ -3998,6 +4024,10 @@ is-callable@^1.1.1, is-callable@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.3.tgz#86eb75392805ddc33af71c92a0eedf74ee7604b2"
 
+is-callable@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75"
+
 is-ci@^1.0.10:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.1.0.tgz#247e4162e7860cebbdaf30b774d6b0ac7dcfe7a5"
@@ -4877,11 +4907,15 @@ lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
 
+lodash.escape@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-4.0.1.tgz#c9044690c21e04294beaa517712fded1fa88de98"
+
 lodash.flattendeep@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"
 
-lodash.isequal@^4.4.0:
+lodash.isequal@^4.4.0, lodash.isequal@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
 
@@ -5587,9 +5621,9 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
-object-inspect@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.5.0.tgz#9d876c11e40f485c79215670281b767488f9bfe3"
+object-inspect@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.6.0.tgz#c70b6cbf72f274aab4c34c0c82f5167bf82cf15b"
 
 object-is@^1.0.1:
   version "1.0.1"
@@ -5605,7 +5639,7 @@ object-visit@^1.0.0:
   dependencies:
     isobject "^3.0.0"
 
-object.assign@^4.0.4, object.assign@^4.1.0:
+object.assign@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.0.tgz#968bf1100d7956bb3ca086f006f846b3bc4008da"
   dependencies:
@@ -6509,6 +6543,10 @@ react-dom@^16.4.2:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
+react-is@^16.4.2:
+  version "16.4.2"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.2.tgz#84891b56c2b6d9efdee577cc83501dfc5ecead88"
+
 react-lifecycles-compat@^3.0.2:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@@ -6537,15 +6575,6 @@ react-proxy@^1.1.7:
     lodash "^4.6.1"
     react-deep-force-update "^1.0.0"
 
-react-reconciler@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.7.0.tgz#9614894103e5f138deeeb5eabaf3ee80eb1d026d"
-  dependencies:
-    fbjs "^0.8.16"
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.0"
-
 react-redux@^5.0.7:
   version "5.0.7"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.7.tgz#0dc1076d9afb4670f993ffaef44b8f8c1155a4c8"