Testing event listener on React component

I'm quite new to React and would like to test simulating a change event on a component. Here is the flow:

1. Assert component property is as expected
2. Trigger change event on component (which has a handler attached that updates a component property)
3. Assert component property has changed to what is expected

This seems pretty basic, but I've tried a few ways to test it - none of which have worked. I'd be really grateful for any advice or pointers on how to approach testing this type of thing in React.

The code works fine but I want to be able to test it. Here's a simplified version of the (in progress) code I'm trying to test:

import React, {Component} from 'react';
import '../search_option/SearchOption';
import SearchOption from "../search_option/SearchOption";

class AccessibleGlobalSearch extends Component {

    constructor(props) {
        super(props);
        this.handle_search_selection = this.handle_search_selection.bind(this);
        this.state = {

            active_search_url: '/site_search/results',

            select_type: 'Select a search type',
            website_search_url: '/site_search/results',
            catalogue_search_url: '/catalogue_search/results/',
            search_options: {
                group_name: 'search_type',
                options: [
                    {
                        label: 'Search Catalogue',
                        id: 'catalogue_search'
                    },
                    {
                        label: 'Search the website',
                        id: 'website_search'
                    }
                ]
            }
        }
    }

    handle_search_selection(e) {

        if(e.target.id === 'catalogue_search') {
            this.setState({active_search_url: this.state.discovery_search_url});
        }

        if(e.target.id === 'website_search') {
            this.setState({active_search_url: this.state.website_search_url});
        }
    }

    render() {
        return (
            <form className="global-search-js" action={this.state.active_search_url} onChange={this.handle_search_selection}>
                <fieldset>
                    <legend>{this.state.select_type}</legend>
                    <SearchOption group_name={this.state.search_options.group_name} options={this.state.search_options.options}/>
                </fieldset>
            </form>
        );
    }
}

export default AccessibleGlobalSearch;

And here is one of the approaches I've been using to test it

import React from 'react';
import ReactDOM from 'react-dom';
import TestRenderer from 'react-test-renderer';
import ReactTestUtils from 'react-dom/test-utils';
import AccessibleGlobalSearch from './AccessibleGlobalSearch';

const test_renderer = TestRenderer.create(<AccessibleGlobalSearch/>);
const test_instance = test_renderer.root;
const instance = test_renderer.getInstance();

it('changes the form action to when that option is selected', () => {

    const rendered_component = test_renderer.toJSON();
    expect(rendered_component.props.action).toBe('/site_search/results');

    const form = test_instance.findByType('form');

    ReactTestUtils.Simulate.change(form, {"target": {"id": "catalogue_search", "checked": true}});

    expect(instance.state.active_search_url).toBe('catalogue_search/results/');

  });