No errors in the console but Ajax call doesn’t seem to be working

I cannot test everything since there are some dependencies on certain markup and functionality, but here’s what I found so far.

Wrap your script in the following instead of $ = jQuery;. This is a better way to handle possible conflicts.

(function($){
    // your code here
})(jQuery);

While the way you’re enqueuing scripts works, it may be better to register them ahead of time and enqueue them in the shortcode. You also want to set jQuery as a dependency of ajax_filter_tests. Something like this:

function ajax_filter_tests_scripts() {
    wp_register_script( 'ajax_filter_tests', get_stylesheet_directory_uri() . '/src/js/components/_filter.js', array('jquery'), '1.0', true );
    wp_localize_script( 'ajax_filter_tests', 'ajax_url', admin_url( 'admin-ajax.php' ) );
}
add_action('wp_enqueue_scripts', 'ajax_filter_tests_scripts');

function ajax_filter_tests_shortcode() {
    wp_enqueue_script( 'ajax_filter_tests' );
    // ...the rest of your code
}

You also want to check to make sure you’re calling $.ajax correctly according to the version of jQuery you’re using. From the documentation:

Deprecation Notice: The jqXHR.success(), jqXHR.error(), and
jqXHR.complete() callbacks are removed as of jQuery 3.0. You can use
jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

var jqxhr = $.ajax({
    url : ajax_url,
    data : data
}).done(function() {
    alert( "success" );
}).fail(function() {
    alert( "error" );
}).always(function() {
    alert( "complete" );
});

This will make sure your script is always firing no matter what the ajax response might be. There may be other issues here, for example using the_permalink() instead of get_permalink(), but this will give you a good start.

Last thing, the issue might be with php instead of javascript. Make sure you turn on debug and check to make sure you’re not getting errors with the rest of your code.