samedi 25 juillet 2020

JEST: fireEvent.submit(...) is not a function

im trynna test my code, but it gives an error "TypeError: _react2.fireEvent.submit(...) is not a function", I dont know how to fix it, This error appears when i put the **"({ getByText, getByTestId, getByLabelText } = render(<TechList />)) "**, in the second test.

I need to test if the text "Node.js" stay in the component even when i rerender it.

My test code below:

    import '@testing-library/jest-dom/extend-expect'
import React from 'react' 
import { render, fireEvent } from '@testing-library/react'

import TechList from '../components/Techlist'

 describe('TechList component', () => {
 
   it('should be able to add new Tech', () => {  
      const { getByText, getByTestId, getByLabelText } = render(<TechList />)

      fireEvent.change(getByLabelText('Tech'), { target: { value: 'Node.js' }})
      fireEvent.submit(getByTestId('tech-form')) 
    
      expect(getByTestId('tech-list')).toContainElement(getByText('Node.js'))
      expect(getByLabelText('Tech')).toHaveValue('')
   })
 
   it('should store techs in storage', () => {
     let { getByText, getByTestId, getByLabelText} = render(<TechList />)

     fireEvent.change(getByLabelText('Tech'), { target: { value: 'Node.js' }})
     fireEvent.submit(getByTestId('tech-form')) 

    ({ getByText, getByTestId, getByLabelText } = render(<TechList />)) 

     expect(getByTestId('tech-list')).toContainElement(getByText('Node.js'))
   })
 
 })

and the Component:

    import React, { useState } from 'react'; 

function Component() {
  const [techs, setTechs] = useState([])
  const [newTech, setNewTech] = useState('')
  
  function handleAddTech() {
    setTechs([...techs, 'Node.js'])
    setNewTech('')
  }

  return (
    <form data-testid="tech-form" onSubmit={handleAddTech} >      
     
      <ul data-testid="tech-list">
      {techs.map(tech => <li key={tech}>{tech}</li>)}
      </ul>
      <label htmlFor="tech">Tech</label>
      <input id="tech" type="text" value={newTech} onChange={e => setNewTech(e.target.value)}/>

      <button  type="submit" onClick={handleAddTech}>Adicionar</button>
    </form>
  )
}

export default Component;

Aucun commentaire:

Enregistrer un commentaire