Added example of tests outside of renderer.

Author: Hyperkid123

packages/examples/src/tests/__snapshots__/custom-component-outside-renderer.test.js.snap

@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<CustomComponent /> outside renderer should render component in error state to snapshot 1`] = `
+<CustomComponent
+  label="custom-component"
+  name="custom-component"
+  sideEffect={[Function]}
+  validate={[Function]}
+>
+  <div
+    className="input-wrapper"
+  >
+    <label
+      className="input-label"
+    >
+      custom-component
+    </label>
+    <input
+      name="custom-component"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      value=""
+    />
+    <div
+      className="custom-error-block"
+    >
+      <span>
+        Required
+      </span>
+    </div>
+  </div>
+</CustomComponent>
+`;
+
+exports[`<CustomComponent /> outside renderer should render component to snapshot 1`] = `
+<CustomComponent
+  label="custom-component"
+  name="custom-component"
+  sideEffect={[Function]}
+>
+  <div
+    className="input-wrapper"
+  >
+    <label
+      className="input-label"
+    >
+      custom-component
+    </label>
+    <input
+      name="custom-component"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      value=""
+    />
+  </div>
+</CustomComponent>
+`;

packages/examples/src/tests/custom-component-outside-renderer.test.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Form from '@data-driven-forms/react-form-renderer/dist/cjs/form';
+import RendererContext from '@data-driven-forms/react-form-renderer/dist/cjs/renderer-context';
+
+import useFieldApi from '@data-driven-forms/react-form-renderer/dist/cjs/use-field-api';
+import toJson from 'enzyme-to-json';
+
+const CustomComponent = (props) => {
+  const { input, meta, label, sideEffect } = useFieldApi(props);
+  return (
+    <div className="input-wrapper">
+      <label className="input-label">{label}</label>
+      <input
+        {...input}
+        onChange={(...args) => {
+          sideEffect(...args); // do something in addition to just changing the value in form state
+          input.onChange(...args);
+        }}
+      />
+      {meta.error && (
+        <div className="custom-error-block">
+          <span>{meta.error}</span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+CustomComponent.defaultProps = {
+  sideEffect: () => {}
+};
+
+const FormWrapper = ({ props, children }) => (
+  <Form onSubmit={() => {}} {...props}>
+    {() => (
+      <form>
+        <RendererContext.Provider value={{ formOptions: {} }}>{children}</RendererContext.Provider>
+      </form>
+    )}
+  </Form>
+);
+
+describe('<CustomComponent /> outside renderer', () => {
+  it('should render component to snapshot', () => {
+    const wrapper = mount(
+      <FormWrapper>
+        <CustomComponent name="custom-component" label="custom-component" />
+      </FormWrapper>
+    );
+    expect(toJson(wrapper.find(CustomComponent))).toMatchSnapshot();
+  });
+  it('should render component in error state to snapshot', () => {
+    const wrapper = mount(
+      <FormWrapper>
+        <CustomComponent name="custom-component" label="custom-component" validate={(value) => (!value ? 'Required' : undefined)} />
+      </FormWrapper>
+    );
+    expect(toJson(wrapper.find(CustomComponent))).toMatchSnapshot();
+  });
+
+  it('should call sideEffect when the input change', () => {
+    const sideEffect = jest.fn();
+    const wrapper = mount(
+      <FormWrapper>
+        <CustomComponent name="custom-component" label="custom-component" sideEffect={sideEffect} />
+      </FormWrapper>
+    );
+    wrapper.find('input[name="custom-component"]').simulate('change', { target: { value: 'foo' } });
+    expect(sideEffect).toHaveBeenCalledTimes(1);
+  });
+});

packages/react-renderer-demo/src/app/pages/testing.md

@@ -29,6 +29,12 @@ Set up your renderer to make it easier to test the component specific features.
 
 <CodeExample source="tests/custom-component-with-renderer.test" />
 
+### Outside renderer
+
+Rendering components outside of the renderer will require some additional set up which is not traditionally used when using form renderer and require some additional knowledge of the library. Most notably, you need to wrap the component inside the `Form` component and `RendererContext`. No functinality provided by the renderer like validations or conditions will be provided so it must be configured.
+
+<CodeExample source="tests/custom-component-outside-renderer.test" />
+
 </Grid>
 <Grid item xs={false} md={2}>
   <ListOfContents file="testing" />