Testing ReactJS with PhantomJS - change SELECT value

Question

Im trying to test ReactJS with PhantomJS,

I cannot seem to trigger change SELECT event:

                selectWidth = [];
                selectPath =  $("#pdp-width-select").first()
                options = $("option", selectPath);
                options.each(function () {
                    $(this).attr("selected","selected");
                    $(this).trigger("change");
                    selectWidth.push({
                        text: $(this).text(),
                        value: $(this).val(),
                        stock: $("._1HQVd").text()
                    })
                })

This code tries to trigger the change event and fetch the stock value.

But it doesn't work.

I also tried this method:

Change the selected value of a drop-down list with jQuery

How to Change select value using PhantomJS

How to trigger event in JavaScript?

                selectWidth = [];
                selectPath =  $("#pdp-width-select").first()
                options = $("option", selectPath);
                options.each(function (i) {
                    selectPath[0].selectedIndex = i;
                    selectWidth.push({
                        text: $(this).text(),
                        value: $(this).val(),
                        stock: $("._1HQVd").text()
                    })
                })

NOTE: I cannot get it to work in the Chrome Dev-tool also.

Answer 1

solution

                evtName = 'change';
                var event = document.createEvent("MouseEvents");
                event.initMouseEvent(evtName, true, true, window,
                    0, 0, 0, 0, 0, false, false, false, false, 0, null);

$("select#pdp-width-select").val('83720')[0].dispatchEvent(event);