Test-Funktion mit Jest in React Js

Question

Ich bin neu zu Reagieren und testen im Allgemeinen so verzeihen Sie die Naivität der Frage. Ich habe eine React Form-Komponente, die onChance auf den Eingängen eine Funktion handleChange ausführt. Versucht, es mit Jest zu testen, kann es aber nicht funktionieren lassen.

Hier ist die Login-Komponente:

class Login extends React.Component { 

    constructor() { 
    super(); 
    this.state = {username: '', password: ''} 
    this.disableSubmit = this.disableSubmit.bind(this); 
    this.handleChange = this.handleChange.bind(this); 
    } 

    handleChange(e) { 
    this.setState({ 
     [e.target.name]: e.target.value 
    }); 
    } 

    render() { 

    return(
     <div className="login"> 
     <form> 
      <h3 className="login__title">LOGIN</h3> 
      <div className="input-group"> 
      <input onChange={this.handleChange} value={this.state.username} className="form-control login__input username" type="text" placeholder="user name" name={'username'} autoFocus/> 
      </div> 
      <div className="input-group"> 
      <input onChange={this.handleChange} value={this.state.password} className="form-control login__input password" type="password" placeholder="password" name={'password'}/> 
      </div> 
      <div> 
      <button className="btn btn-primary btn-block login__button" type="submit">Login</button> 
      </div> 
     </form> 
     </div> 

    ) 
    } 
} 

export default Login; 

Hier ist mein Test:

import React from 'react' 
import { shallow, mount } from 'enzyme' 
import { shallowToJson } from 'enzyme-to-json' 


import {Login} from '../../../src/base/components/index' 


describe('Given the Login component is rendered',() => { 

    describe('Snapshots',() => { 
    let component 

    beforeEach(() => { 
     component = shallow(<Login />) 
    }) 

    it('should be as expected',() => { 
     expect(shallowToJson(component)).toMatchSnapshot() 
    }) 
    }) 

}) 


test('Submitting the form should call handleSubmit',() => { 

    const startState = {username: ''}; 
    const handleChange = jest.fn(); 
    const login = mount(<Login />); 
    const userInput = login.find('.username'); 

    userInput.simulate('change'); 

    expect(handleChange).toBeCalled(); 

}) 

Der Snapshot-Test besteht in Ordnung, aber in diesem letzten Versuch fehlschlägt mein Funktionstest mit:

TypeError: Cannot read property 'target' of undefined 

Rate ich muss etwas an die Funktion übergeben? Bisschen verwirrt!

Vielen Dank im Voraus für Ihre Hilfe.

UPDATE:

verändert den Test wie folgt aber Test nicht mit: expect(jest.fn()).toBeCalled() Expected mock function to have been called.

Test aktualisiert:

test('Input should call handleChange on change event',() => { 

    const login = mount(<Login />); 
    const handleChange = jest.spyOn(login.instance(), 'handleChange'); 
    const userInput = login.find('.username'); 
    const event = {target: {name: "username", value: "usertest"}}; 

    userInput.simulate('change', event); 

    expect(handleChange).toBeCalled(); 

}) 

Answer 1

die Lösung hier gefunden: Enzyme simulate an onChange event

test('Input should call handleChange on change event',() => { 

    const event = {target: {name: 'username', value: 'usertest'}}; 
    const login = mount(<Login />); 
    const handleChange = jest.spyOn(login.instance(), 'handleChange'); 
    login.update(); // <--- Needs this to force re-render 
    const userInput = login.find('.username'); 

    userInput.simulate('change', event); 

    expect(handleChange).toBeCalled(); 

}) 

es dieses login.update(); zu arbeiten erforderlich, um!

Vielen Dank für Ihre Hilfe!

Answer 2

Ja, werden Sie ein Event-Objekt Sie simulate Funktion übergeben müssen .

const event = {target: {name: "special", value: "party"}}; 

    element.simulate('change', event); 

EDIT: Oh, und Sie müssen auch, wie etwas tun:

jest.spyOn(login.instance(), 'handleChange') 

aber das ist in keinem Zusammenhang mit Ihrem Fehler

Answer 3

handleChange ist zurzeit nicht verspottet. Ein paar Ansätze:

Pass Change Event Handler als Prop zu Login Komponente.

<div className="input-group"> 
    <input 
    onChange={this.props.handleChange} 
    value={this.state.username} 
    className="form-control login__input username" 
    type="text" 
    placeholder="user name" 
    name={'username'} 
    autoFocus 
    /> 
</div> 

login.spec.js

... 
const handleChange = jest.fn(); 
const login = mount(<Login handleChange={handleChange}/>); 
... 

Ersetzen handleChange mit der mock-Funktion.

... 
const handleChange = jest.fn(); 
const login = mount(<Login />); 
login['handleChange'] = handleChange // replace instance 
... 
expect(handleChange).toBeCalled(); 

Verwenden jest spyOn ein Mock-Funktion zu erstellen, die die ursprüngliche Funktion wickelt.

... 
const handleChange = jest.spyOn(object, 'handleChange') // will call the original method 
expect(handleChange).toBeCalled(); 

mit einer Mock-Funktion auf die Login-Komponente ersetzen handleChange. ... const handleChange = jest.spyOn (Objekt, 'handleChange'). Mock // ruft die ursprüngliche Methode expect (handleChange) auf.heißen();