Problems testing a AddBlogForm with jest

Seems like the test gives TypeError for every component. “setBlogUrl is not a function” “setBlogTitle is not a function” etc.

What could be the cause?

Here’s my AddBlogForm component and test:

const AddBlogForm = ({ addBlogVisible, setAddBlogVisible, title, author, url, setBlogTitle, setBlogAuthor, setBlogUrl, handleBlogAdd }) => {
  const hideWhenVisible = { display: addBlogVisible ? 'none' : '' }
  const showWhenVisible = { display: addBlogVisible ? '' : 'none' }

  return (
    <div>
      <div style={hideWhenVisible}>
        <button onClick={() => setAddBlogVisible(true)}>add blog</button>
      </div>

      <div style={showWhenVisible}>
        <form onSubmit={handleBlogAdd}>
          <h2> add a blog </h2>
          <div>
            title
            <input type="text" value={title} name="blogTitle" onChange={({ target }) => setBlogTitle(target.value)}
              placeholder="write title content here"
            />
          </div>
          <div>
            author
            <input type="text" value={author} name="blogAuthor" onChange={({ target }) => setBlogAuthor(target.value)}
              placeholder="write author content here"
            />
          </div>
          <div>
            url
            <input type="text" value={url} name="blogUrl" onChange={({ target }) => setBlogUrl(target.value)}
              placeholder="write url content here"
            />
          </div>
          <button type="submit" onClick={() => setAddBlogVisible(false)}>add</button>
          <button type="button" onClick={() => setAddBlogVisible(false)}>cancel</button>
        </form>
      </div>
    </div>
  )
}

export default AddBlogForm

import React from 'react'
import { render, screen } from '@testing-library/react'
import '@testing-library/jest-dom'
import AddBlogForm from './AddBlogForm'
import userEvent from '@testing-library/user-event'

test('should pass correct details, when event handlers are called', async () => {
  const handleBlogAdd = jest.fn()
  const user = userEvent.setup()

  render(<AddBlogForm handleBlogAdd={handleBlogAdd}
  />)

  const titleInput = screen.getByPlaceholderText('write title content here')
  await user.type(titleInput, 'testTitle')
  const authorInput = screen.getByPlaceholderText('write author content here')
  await user.type(authorInput, 'testAuthor')
  const urlInput = screen.getByPlaceholderText('write url content here')
  await user.type(urlInput, 'testUrl')

  const addButton = screen.getByText('add')
  await user.click(addButton)

  screen.debug()

})