Mapper agnostic way of retrieving/setting the value of a SELECT

We’re struggling with the testing of SELECT fields in MiQ, while a simple input field can be changed using simulate('change'), the select needs to be hacked with tapping into the onSelect of the right component in the DOM. I was not able to find a clear way to find this select automatically, always had to juggle with the selector + children().children() calls.

I am assuming that if I change my component mapper, I will have to rewrite all my tests as they can have a different implementation of select, with the onChange function set on a different level. Would it be possible to somehow expose a way of querying/setting the value of a select in a unified way for any component mapper? I know that there’s a common wrapper around all selects, so it should be theoretically possible to find that and have something available there.

[Hyperkid123]

@skateman. Mapper agnostic way is using the formOptions.change(). You will have create a testing component that will expose the formApi. Either enhance the schema or add it to the template somewhere.

const DummyComponent = () => <div></div> // only exists to expose its props from the hook
const FormApiComponent = () => {
  const formOptions = useFormApi()
  return <DummyComponent {...formOptions} />
}

// in enzyme test
wrapper.find('DummyComponent').prop('change')('field-name', 'field-value')

For this example use some test-specific FormRenderer that will inject the extra component to the form. Using jest mock should be enough to modify your current renderer wrapper schema/template.

But generally, you can’t just tap into React.Context value which is being used to store the form context. So you have to add some testing API one way or the other. No other option I am afraid.

We could add a component like this to some test-utils package. But honestly, I don’t think that this is something we really need in the core library. It’s very easy and quick to implement. Some react testing libraries won’t event let you access component props/state and will only let you modify the components via browser events. Which is the right ™️ way to do it.

[skateman]

Thanks!