testing-library / testing-library/dom-testing-library
`fireEvent.drop` API behaves not as expected about preventDefault in Browser and js env
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 3.3k
- Forks
- 474
- PR merge metrics
- No merged PRs in 30d
Description
- @testing-library/dom 9.3.4 version:
- Testing Framework and version: null
- DOM Environment: 20.0.3
Reproduction:
import { fireEvent, render,act } from '@testing-library/react'
import type { FC } from 'react'
function tick(): Promise<void> {
return new Promise((resolve) => {
setTimeout(resolve, 0)
})
}
async function fireDragDrop(source: Element) {
await act(async () => {
fireEvent.dragStart(source)
fireEvent.dragEnter(source)
fireEvent.dragOver(source)
fireEvent.drop(source)
await tick()
})
}
const Container: FC = (function Container() {
return (
<>
<div draggable="true"
data-testid={'Other1'}
onDragStart={(e)=>{
e.preventDefault()
console.log("ondragstart")
}}
onDragOver={()=>{
console.log("onDragOver")
}}>
other1
</div>
</>
)
})
describe('drag', () => {
it('prevent', async () => {
const rendered = render(<Container />)
const box1 = (await rendered.findAllByTestId('Other1'))[0]
await fireDragDrop(box1)
})
})
What you did:
run it in brower and testing env
Problem description:
when I run this component in the browser, onDragOver isn't executed due to e.preventDefault() in the onDragStart test case,
but onDragOver is executed in testing env after onDragStart
Expect
ii should prevent onDragOver fn in test env
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the supplied drag-and-drop reproduction and the fireEvent.dragStart, fireEvent.dragEnter, fireEvent.dragOver, and fireEvent.drop entry points. Compare the browser and test-environment event sequences, focusing on how preventDefault in onDragStart affects onDragOver. Done means the test environment's behavior matches the intended browser behavior, with coverage for the reproduction.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- testing
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100