TypeError: _this.ref.current.querySelector is not a function #4061
Comments
|
👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. |
|
Semantic-UI-React/src/modules/Dropdown/Dropdown.js Lines 779 to 782 in 2d368b9 So it comes from there. Can you please add |
|
Did it, does it help ?
|
|
@callain yep, it's helpful. Can you please share all props from that object? If you can dump React tree it can be also helpful, for Enzyme you can use It fails because |
|
I am also seeing this on my jest test output, not related to using redux-form (not a dependency of ours): perhaps there is a specific API I can mock that JSDom doesn't implement that's causing this error? For now, this is a blocker to upgrading to v1 from 0.88.2. 😢 |
|
Can anyone please create a minimal repro of this on CodeSandbox? |
|
I prepared a CodeSandbox: https://codesandbox.io/s/upbeat-stallman-mdxom?file=/src/index.spec.js |
|
Thanks for getting this prepped!! ❤️ , will take a look tonight and see if I can get a working example going for you. |
|
Never used Enzyme before, managed to export the tree on my project thanks to your codesandbox example. So it might be related to a difference between react-test-renderer and Enzyme <SemanticFormField input={{...}} meta={{...}} as={[Function: Select]} disabled={false} fluid={true} htmlLabel={{...}} multiple={true} options={{...}} placeholder="Jours travaillés" pointing={true}>
<FormField error={false} width={[undefined]} className="" inline={false}>
<div className="field" id={[undefined]}>
<label>
Jours travaillés
</label>
<Select fluid={true} multiple={true} options={{...}} name="workedDaysType" onBlur={[Function]} onChange={[Function: handleChange]} onDragStart={[Function]} onDrop={[Function]} onFocus={[Function]} value="" disabled={false} data-testid="workedDaysType" checked={[undefined]} type={[undefined]} label={[undefined]} placeholder="Jours travaillés" autoFocus={[undefined]}>
<Dropdown fluid={true} multiple={true} options={{...}} name="workedDaysType" onBlur={[Function]} onChange={[Function: handleChange]} onDragStart={[Function]} onDrop={[Function]} onFocus={[Function]} value="" disabled={false} data-testid="workedDaysType" checked={[undefined]} type={[undefined]} label={[undefined]} placeholder="Jours travaillés" autoFocus={[undefined]} selection={true} additionLabel="Add " additionPosition="top" closeOnBlur={true} closeOnEscape={true} deburr={false} icon="dropdown" minCharacters={1} noResultsMessage="No results found." openOnFocus={true} renderLabel={[Function: renderItemContent]} searchInput="text" selectOnBlur={true} selectOnNavigation={true} wrapSelection={true}>
<Ref innerRef={{...}}>
<RefFindNode innerRef={{...}}>
<div name="workedDaysType" onDragStart={[Function]} onDrop={[Function]} data-testid="workedDaysType" checked={[undefined]} type={[undefined]} label={[undefined]} autoFocus={[undefined]} role="listbox" aria-busy={[undefined]} aria-disabled={false} aria-expanded={false} aria-multiselectable={true} className="ui fluid multiple selection dropdown" onBlur={[Function]} onClick={[Function]} onKeyDown={[Function]} onMouseDown={[Function]} onFocus={[Function]} onChange={[Function]} tabIndex={0}>
<DropdownText className="default text" content="Jours travaillés">
<div aria-atomic={true} aria-live="polite" role="alert" className="divider default text">
Jours travaillés
</div>
</DropdownText>
<Icon name="dropdown" className="" onClick={[Function: onClick]} as="i">
<i onClick={[Function]} aria-hidden="true" className="dropdown icon" />
</Icon>
<DropdownMenu direction={[undefined]} open={[undefined]}>
<div className="menu transition">
<DropdownItem active={false} onClick={[Function]} selected={true} value="WEEK" text="Semaine" style={{...}}>
<div style={{...}} role="option" aria-disabled={[undefined]} aria-checked={false} aria-selected={true} className="selected item" onClick={[Function]}>
<span className="text">
Semaine
</span>
</div>
</DropdownItem>
<DropdownItem active={false} onClick={[Function]} selected={false} value="WEEK_END" text="Week-end" style={{...}}>
<div style={{...}} role="option" aria-disabled={[undefined]} aria-checked={false} aria-selected={false} className="item" onClick={[Function]}>
<span className="text">
Week-end
</span>
</div>
</DropdownItem>
<DropdownItem active={false} onClick={[Function]} selected={false} value="PUBLIC_HOLIDAY" text="Jour férié" style={{...}}>
<div style={{...}} role="option" aria-disabled={[undefined]} aria-checked={false} aria-selected={false} className="item" onClick={[Function]}>
<span className="text">
Jour férié
</span>
</div>
</DropdownItem>
</div>
</DropdownMenu>
</div>
</RefFindNode>
</Ref>
</Dropdown>
</Select>
</div>
</FormField>
</SemanticFormField> |
|
Oops, I missed that it's related to |
|
And about this question
No, I tried with But as @kylepeeler said, it's not related to redux-form |
|
https://codesandbox.io/s/infallible-wildflower-uoql6?file=/src/index.spec.js |
|
Yes, I will try! |
|
Not as minimal as you may wish as it seems to behave wierdly but it reproduces the issue. https://codesandbox.io/s/dazzling-moser-tgz28?file=/src/index.spec.js Consider exporting it to ZIP then unzip, install dependencies and start tests :) |
|
I was able to simplify it enough: https://codesandbox.io/s/hardcore-saha-cyu79?file=/src/index.spec.js |
|
So... It's not a It's an issue with
The workaround exists and I think that mocking with Jest will be the safest option: jest.mock('react-dom', () => ({
findDOMNode: () => ({}),
});I will think how we can properly to fix it till next release to avoid mocks on consumer's side. @kylepeeler @callain thank you for participating in this 👍 |
|
I am starting to develop an allergy to refs in React 😬 I tried mocking following facebook/create-react-app#7539 but it's unclear where should mocks be... Anyway, glad I could help, those tests aren't critical at all so they will remain skipped until an eventual SUIR upgrade |
|
Thank you ! I am glad to see my issue has led to fix in a microsoft project 😄 |
|
In my case - with the latest version (v2.0.0) and workaround proposed in facebook/react#7371 (comment) it does not work (testing components using SUIR's Dropdown with Jest and Storyshots addon for Storybook). Still getting similar error as in the first message: Possibly more sophisticated Jest mocking is necessary? |
|
@qooban this looks like a different kind of issue. Can you please update a CodeSandbox previously mentioned in this issue to reproduce the problem? |
|
@layershifter I investigated the problem deeper. Looks like that indeed, it is different kind of issue, most probably not related to Semantic UI React, but to React Test Renderer and Storyshots (Storybook addon). I found few ways around this issue (either using Enzyme as a renderer, disable specific stories in my Storybook, using createNodeMock with Storyshots), so thanks for the attention 👍🏻 |
Bug Report
After upgrading to the last version, I have this error in some of our jest tests. Somehow there is a way for querySelector to not be function.
A redux form field which use a Semantic Select component
Steps
It's a complex use with redux-form and a generic component we called SemanticFormField to create a bridge between redux-form and SUIR
Expected Result
No TypeError
Actual Result
Version
SUIR 1.2.1
React 16.8.2
React Test Renderer 16..8.2
Testcase
I can't manage to create a small test at the moment
The text was updated successfully, but these errors were encountered: