I'm very new to writing tests in react and I have an input with the file type. I want to test it but when I write the below test for it:

describe('Custom Drop Zone', () => {
  test('should upload the file', () => {
    const file = new File(['hello'], 'hello.png', { type: 'image/png' })
    const { container } = render(<CustomDropZone />)

    const input = container.querySelector('#upload-file')
  })
})

I get the below error:

● Custom Drop Zone › should upload the file

    ReferenceError: File is not defined

       5 | describe('Custom Drop Zone', () => {
       6 |   test('should upload the file', () => {
    >  7 |     const file = new File(['hello'], 'hello.png', { type: 'image/png' })
         |                  ^
       8 |     const { container } = render(<CustomDropZone />)
       9 |
      10 |     const input = container.querySelector('#upload-file')

      at Object.<anonymous> (src/__tests__/home/CustomDropZone.test.tsx:7:18)

this is the test that the official documentation wrote:

test('upload file', () => {
  const file = new File(['hello'], 'hello.png', {type: 'image/png'})

  render(
    <div>
      <label htmlFor="file-uploader">Upload file:</label>
      <input id="file-uploader" type="file" />
    </div>,
  )
  const input = screen.getByLabelText(/upload file/i)
  userEvent.upload(input, file)

  expect(input.files[0]).toStrictEqual(file)
  expect(input.files.item(0)).toStrictEqual(file)
  expect(input.files).toHaveLength(1)
})