Added test example of custo component inside renderer.

Author: Hyperkid123

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

@@ -0,0 +1,60 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<CustomComponent /> with renderer should render component in error state to snapshot 1`] = `
+<CustomComponent
+  label="Custom label"
+  name="custom-component"
+  sideEffect={[Function]}
+  validate={[Function]}
+>
+  <div
+    className="input-wrapper"
+  >
+    <label
+      className="input-label"
+    >
+      Custom label
+    </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 /> with renderer should render component to snapshot 1`] = `
+<CustomComponent
+  label="Custom label"
+  name="custom-component"
+  sideEffect={[Function]}
+  validate={[Function]}
+>
+  <div
+    className="input-wrapper"
+  >
+    <label
+      className="input-label"
+    >
+      Custom label
+    </label>
+    <input
+      name="custom-component"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      value=""
+    />
+  </div>
+</CustomComponent>
+`;

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
+
+import { FormTemplate } from '@data-driven-forms/mui-component-mapper/dist/cjs';
+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 createSchema = ({ label = 'Custom label', validate = [], ...rest }) => ({
+  fields: [
+    {
+      name: 'custom-component',
+      component: 'custom-component',
+      label,
+      validate,
+      ...rest
+    }
+  ]
+});
+
+const RendererWrapper = (props) => (
+  <FormRenderer
+    onSubmit={() => {}}
+    FormTemplate={FormTemplate}
+    componentMapper={{
+      'custom-component': CustomComponent
+    }}
+    schema={{ fields: [] }}
+    {...props}
+  />
+);
+
+describe('<CustomComponent /> with renderer', () => {
+  it('should render component to snapshot', () => {
+    const wrapper = mount(<RendererWrapper schema={createSchema({})} />);
+    expect(toJson(wrapper.find(CustomComponent))).toMatchSnapshot();
+  });
+  it('should render component in error state to snapshot', () => {
+    const wrapper = mount(<RendererWrapper schema={createSchema({ validate: [{ type: 'required' }] })} />);
+    expect(toJson(wrapper.find(CustomComponent))).toMatchSnapshot();
+  });
+
+  it('should call sideEffect when the input change', () => {
+    const sideEffect = jest.fn();
+    const wrapper = mount(<RendererWrapper schema={createSchema({ sideEffect })} />);
+    wrapper.find('input[name="custom-component"]').simulate('change', { target: { value: 'foo' } });
+    expect(sideEffect).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -19,6 +19,16 @@ Bellow is an example of a form with a async validation and a conditional field.
 
 <CodeExample source="tests/form-renderer.test" />
 
+## Testing custom components
+
+Components that are using `useFieldApi` or `useFormApi` must be children of contexts. Therefore they must be wrapped inside these contexts when testing. The simplest way to test them, is just rendering them with the FormRenderer, but there may be cases when that is not possible. We will show you both options.
+
+### With renderer
+
+Set up your renderer to make it easier to test the component specific features. Use initial values to trigger falsey validation results to avoid unnecessary changes simlation.
+
+<CodeExample source="tests/custom-component-with-renderer.test" />
+
 </Grid>
 <Grid item xs={false} md={2}>
   <ListOfContents file="testing" />