react-testing-library - fireEvent.select() not working
I'm currently running some tests for a project I'm working on, and am having trouble using fireEvent.select() as a way to focus on an input field.
My test so far:
it('is not working :(', () =>
const input = queryByPlaceholderText('blah');
fireEvent.change(input,
target: value: 'some text',
);
expect(input).toHaveAttribute('value', 'some text');
fireEvent.select(input); <-- issue here
);
The component I am testing has a dropdown menu that is only exposed when the input is focused on, but it seems like neither fireEvent.change() nor fireEvent.select() are focusing on the field. I know that fireEvent.change() changes the input value.
So far, I have tried:
fireEvent.click()fireEvent.focus()fireEvent.select()input.focus()
but none of those options worked.
I need to be able to select an option in this dropdown menu to be able to properly test the component.
TL;DR
Is there a way to focus on an input field with RTL?
javascript reactjs jestjs react-testing-library
asked Nov 14 '18 at 17:22
ZachZach
15910
add a comment |
I'm currently running some tests for a project I'm working on, and am having trouble using fireEvent.select() as a way to focus on an input field.
My test so far:
it('is not working :(', () =>
const input = queryByPlaceholderText('blah');
fireEvent.change(input,
target: value: 'some text',
);
expect(input).toHaveAttribute('value', 'some text');
fireEvent.select(input); <-- issue here
);
The component I am testing has a dropdown menu that is only exposed when the input is focused on, but it seems like neither fireEvent.change() nor fireEvent.select() are focusing on the field. I know that fireEvent.change() changes the input value.
So far, I have tried:
fireEvent.click()fireEvent.focus()fireEvent.select()input.focus()
but none of those options worked.
I need to be able to select an option in this dropdown menu to be able to properly test the component.
TL;DR
Is there a way to focus on an input field with RTL?
javascript reactjs jestjs react-testing-library
asked Nov 14 '18 at 17:22
ZachZach
15910
Did you try usingfireEvent.click()?
– Sushanth --
Nov 14 '18 at 17:27
Yes, that would have been good to mention. I'll add it to my original post. So far I have triedfireEvent.click(),input.focus(), andfireEvent.focus(), none of which have worked.
– Zach
Nov 14 '18 at 20:39
1
Can you put a minimum reproducible example on codesandbox?
– Gpx
Nov 15 '18 at 8:02
@Zach - did you get this to work? I'm struggling with a similar issue right now using React-Select.
– thejohnbackes
Feb 5 at 17:52
add a comment |
I'm currently running some tests for a project I'm working on, and am having trouble using fireEvent.select() as a way to focus on an input field.
My test so far:
it('is not working :(', () =>
const input = queryByPlaceholderText('blah');
fireEvent.change(input,
target: value: 'some text',
);
expect(input).toHaveAttribute('value', 'some text');
fireEvent.select(input); <-- issue here
);
The component I am testing has a dropdown menu that is only exposed when the input is focused on, but it seems like neither fireEvent.change() nor fireEvent.select() are focusing on the field. I know that fireEvent.change() changes the input value.
So far, I have tried:
fireEvent.click()fireEvent.focus()fireEvent.select()input.focus()
but none of those options worked.
I need to be able to select an option in this dropdown menu to be able to properly test the component.
TL;DR
Is there a way to focus on an input field with RTL?
javascript reactjs jestjs react-testing-library
asked Nov 14 '18 at 17:22
ZachZach
15910
I'm currently running some tests for a project I'm working on, and am having trouble using fireEvent.select() as a way to focus on an input field.
My test so far:
it('is not working :(', () =>
const input = queryByPlaceholderText('blah');
fireEvent.change(input,
target: value: 'some text',
);
expect(input).toHaveAttribute('value', 'some text');
fireEvent.select(input); <-- issue here
);
The component I am testing has a dropdown menu that is only exposed when the input is focused on, but it seems like neither fireEvent.change() nor fireEvent.select() are focusing on the field. I know that fireEvent.change() changes the input value.
So far, I have tried:
fireEvent.click()fireEvent.focus()fireEvent.select()input.focus()
but none of those options worked.
I need to be able to select an option in this dropdown menu to be able to properly test the component.
TL;DR
Is there a way to focus on an input field with RTL?
javascript reactjs jestjs react-testing-library
javascript reactjs jestjs react-testing-library
asked Nov 14 '18 at 17:22
ZachZach
15910
asked Nov 14 '18 at 17:22
ZachZach
15910
edited Nov 14 '18 at 20:47
Zach
asked Nov 14 '18 at 17:22
ZachZach
15910
asked Nov 14 '18 at 17:22
ZachZach
15910
asked Nov 14 '18 at 17:22
ZachZach
15910
15910
Did you try usingfireEvent.click()?
– Sushanth --
Nov 14 '18 at 17:27
Yes, that would have been good to mention. I'll add it to my original post. So far I have triedfireEvent.click(),input.focus(), andfireEvent.focus(), none of which have worked.
– Zach
Nov 14 '18 at 20:39
1
Can you put a minimum reproducible example on codesandbox?
– Gpx
Nov 15 '18 at 8:02
@Zach - did you get this to work? I'm struggling with a similar issue right now using React-Select.
– thejohnbackes
Feb 5 at 17:52
add a comment |
Did you try usingfireEvent.click()?
– Sushanth --
Nov 14 '18 at 17:27
Yes, that would have been good to mention. I'll add it to my original post. So far I have triedfireEvent.click(),input.focus(), andfireEvent.focus(), none of which have worked.
– Zach
Nov 14 '18 at 20:39
1
Can you put a minimum reproducible example on codesandbox?
– Gpx
Nov 15 '18 at 8:02
@Zach - did you get this to work? I'm struggling with a similar issue right now using React-Select.
– thejohnbackes
Feb 5 at 17:52
Did you try using
fireEvent.click() ?– Sushanth --
Nov 14 '18 at 17:27
Did you try using
fireEvent.click() ?– Sushanth --
Nov 14 '18 at 17:27
Yes, that would have been good to mention. I'll add it to my original post. So far I have tried
fireEvent.click(), input.focus(), and fireEvent.focus(), none of which have worked.– Zach
Nov 14 '18 at 20:39
Yes, that would have been good to mention. I'll add it to my original post. So far I have tried
fireEvent.click(), input.focus(), and fireEvent.focus(), none of which have worked.– Zach
Nov 14 '18 at 20:39
1
1
Can you put a minimum reproducible example on codesandbox?
– Gpx
Nov 15 '18 at 8:02
Can you put a minimum reproducible example on codesandbox?
– Gpx
Nov 15 '18 at 8:02
@Zach - did you get this to work? I'm struggling with a similar issue right now using React-Select.
– thejohnbackes
Feb 5 at 17:52
@Zach - did you get this to work? I'm struggling with a similar issue right now using React-Select.
– thejohnbackes
Feb 5 at 17:52
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53305648%2freact-testing-library-fireevent-select-not-working%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53305648%2freact-testing-library-fireevent-select-not-working%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Did you try using
fireEvent.click()?– Sushanth --
Nov 14 '18 at 17:27
Yes, that would have been good to mention. I'll add it to my original post. So far I have tried
fireEvent.click(),input.focus(), andfireEvent.focus(), none of which have worked.– Zach
Nov 14 '18 at 20:39
1
Can you put a minimum reproducible example on codesandbox?
– Gpx
Nov 15 '18 at 8:02
@Zach - did you get this to work? I'm struggling with a similar issue right now using React-Select.
– thejohnbackes
Feb 5 at 17:52