React-select: Testing with nightmare

Created on 30 Mar 2017  ·  14Comments  ·  Source: JedWatson/react-select

Hello Folks,
I'm attempting to test my react app using nightmare. I have been unable to get nightmare to click on an option choice.
In dissecting the react-select html, I see that there's not really an HTML select in there, and in fact the only thing we talk to is an HTML input. I am able to target that input, .type text into, see the letters going in, and then POOF! the input clears as if nothing had ever happened, and my test behaves accordingly.
I've tried to .type('apple\n') or .type('apple\t') or to just type the input and then click somewhere else. None of this works.
Am I doing something obviously wrong or might this be a more obscure error? Thanks in advance for your advice.

All 14 comments

I've been wondering the same thing - I did an experiment to implement testing of react-select itself using nightmare but had similar issues, unfortunately didn't have enough time to work out what was going wrong.

Would appreciate any insights anyone can share.

@export-mike this might be something you're interested in looking into?

Hey @bostontrader I've been recently working with nightmare testing on keystone. https://github.com/keystonejs/keystone/tree/feature/nightmare/nightmares

In this branch I had to interact with react-select a few times. I also found it complicated to interact with but hopefully this is what you need to get it working.

.type('.Select-control input', 'Bob Dylan\u000d')

\u000d being the key thing to set, I also went down the \n path which didn't work for me.

That worked for me (I was having the same issue), thanks @export-mike!

@JedWatson good to close this issue. 👍

@export-mike Thanks for the advice. It was spot on. Who would have thought that Dylan could solve this? My select is for picking pieces of English grammar. But now, instead of "noun", "verb", "adjective", etc., I have Dylan, Hendrix, Skynard, etc. Although this might confuse my users it's a small price to pay to figure this out :-)

Oh! One more wrinkle... the \u000d bit solves the problem usually, but... it still doesn't work if we try to enter the first item in the select. Am I just having a bad day or do other folks step in this also?

@bostontrader so it doesn't work when you enter say 'Bob Dylan\u000d'

when the select has the following order:
['Bob Dylan', 'Jimi Hendrix', 'Lynyrd Skinner']

Did not work for me is there any alternate way to select the react dropdown

@samavamsi1 do you have example code?

no i donot have a sample code but the dropdown is in hidden state i is
getting hidden (TYPE IS React ) how select such type of dropdown value

On 5 Jun 2017 7:01 pm, "Mike James" notifications@github.com wrote:

@samavamsi1 https://github.com/samavamsi1 do you have example code?


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/JedWatson/react-select/issues/1635#issuecomment-306187986,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AYAe9As-dUezqjIkHd_dTS3SbCsXwk8Mks5sBANKgaJpZM4MtsRD
.

Hidden? I'm not fully familiar with the react-select api so the component isn't visible in the dom?

the drop down select options will be in hidden state how to select those
type of options in dropdown

On 5 Jun 2017 7:15 pm, "Mike James" notifications@github.com wrote:

Hidden? I'm not fully familiar with the react-select api so the component
isn't in the dom?


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/JedWatson/react-select/issues/1635#issuecomment-306191010,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AYAe9GQHaAIPuSpjRVClIQSrO55Vl7-Fks5sBAZpgaJpZM4MtsRD
.

Can you see the option tags in the dom? It's likely you'll need to interact
with react select first to change its internal state to expose the dropdown
options for nightmare to interact with.

On Mon, 5 Jun 2017 at 11:51 pm, samavamsi1 notifications@github.com wrote:

the drop down select options will be in hidden state how to select those
type of options in dropdown

On 5 Jun 2017 7:15 pm, "Mike James" notifications@github.com wrote:

Hidden? I'm not fully familiar with the react-select api so the component
isn't in the dom?


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<
https://github.com/JedWatson/react-select/issues/1635#issuecomment-306191010
,
or mute the thread
<
https://github.com/notifications/unsubscribe-auth/AYAe9GQHaAIPuSpjRVClIQSrO55Vl7-Fks5sBAZpgaJpZM4MtsRD

.


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/JedWatson/react-select/issues/1635#issuecomment-306192506,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AC2Fn1SKhnw43Lbl5yjG5hNpBqaffxszks5sBAfggaJpZM4MtsRD
.

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues / pull requests.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest version.

If you feel this issue / pull request is still relevant and you'd like us to review it, please leave a comment and we'll do our best to get back to you.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ericj17 picture ericj17  ·  3Comments

MindRave picture MindRave  ·  3Comments

mjuopperi picture mjuopperi  ·  3Comments

sampatbadhe picture sampatbadhe  ·  3Comments

Meesam picture Meesam  ·  3Comments