Writing component/unit tests for custom renderers

General
1

Hi there,

Is there a best practice for writing unit tests to test components and renderers?

Thanks

2

This link will be helpful.

3

Hi, this doesnt seem to cover writing unit tests.

Currently have this issue when trying to write a test for my controller

    TypeError: Cannot read property 'scope' of undefined

      16 |   it('WHEN component is loaded THEN render element', () => {
      17 |     const handleChange = jest.fn();
    > 18 |     const { getByTestId } = render(<TextFieldControl
         |                                   ^
      19 |       data={'foo bar'}
      20 |       handleChange={handleChange}
      21 |       path={'bar.foo'}
4

Hi @JustKyle,

There are multiple ways of testing your components:

  • Testing the “unwrapped” version, i.e. the component which was not wrapped in a JSON Forms binding. In that case every prop you hand over is exactly the one which the rendering code receives. This is the “raw” way of testing your component
  • If you want to include the bindings into the test you can use the wrapped version. However for it to work you then also need to provide the JSON Forms wide state. This can be done by wrapping your component with the JsonFormsStateProvider in your test, see here for an example. However this is an “internal” component and therefore not intuitive to use, for example to test emitted changes you need a special emitter, see here. Note that the wrapped component needs to be handed over the props in the same way as the JsonFormsDispatch receives in the normal use case (e.g. a control schema is still the parent schema at that point of time)
  • If the option above is too involved or you want to test the whole rendering chain then you can of course also just invoke JsonForms and make sure to handover schema and uischema so that your renderer wins. See for example here.