plaisanterie: fonction Mock n'a pas été appelé en fonction de promesse fausse

Question

Je veux tester ma réaction composante de connexion, mais la fonction simulée n'a pas été appelé:

Connexion:

export default class LoginPage extends PureComponent { 
    static propTypes = { 

     login: PropTypes.func.isRequired, 
     history: PropTypes.shape({ 
      replace: PropTypes.func.isRequired, 
     }).isRequired, 
    }; 

    onSubmit = (e) => { 
     this.props.login(this.state.username, this.state.password) 
      .then(() => { 

       this.props.history.replace('/'); 
      }); 
    }; 

    render() { 
     return (
      <form onSubmit={this.onSubmit}> 
       ... 
      </form> 
     ); 
    } 
} 

J'utilise jest + enzyme pour tester ceci:

const props = { 
    login: jest.fn(() => Promise.resolve('success')), 
    history: { 
     replace: jest.fn() 
    }, 
}; 

const wrapper = mount(<LoginPage {...props}/>); 

const form = wrapper.find(Form); 
const inputs = form.find('input'); 
const username = inputs.at(0); 
const password = inputs.at(1); 
username.simulate('change', {target: {value: 'Changed'}}); 
password.simulate('change', {target: {value: 'Changed'}}); 

form.simulate('submit'); 

expect(props.login).toBeDefined(); 
expect(props.history.replace).toBeDefined(); 

// this is success 
expect(props.login).toBeCalled(); 

// this is failure 
expect(props.history.replace).toBeCalled(); 

J'outragent deux fonctions, et la history.replace doit être appelé par login, le login raillé comme fonction Promise.

expect(props.login).toBeCalled() test réussi.

mais expect(props.history.replace).toBeCalled() échec du test.

Je consigne props.history.replace.mock, il sort { calls: [], instances: [] }.

Answer 1

Vous devez informer Jest de la promesse que vous utilisez sinon il n'attendra pas pour que le test soit terminé avant que la promesse ne se résolve. Here sont les documents pour tester les trucs asynchrones. Votre test doit devenir une fonction async. La promesse doit être stockée dans une variable qui peut être utilisé avec await après que le formulaire a été soumis au but:

il (« fait quelque chose », async() => { const p = Promise.resolve (« succès »)

const props = { 
    login: jest.fn(() => p), 
    history: { 
     replace: jest.fn() 
    }, 
}; 

const wrapper = mount(<LoginPage {...props}/>); 

const form = wrapper.find(Form); 
const inputs = form.find('input'); 
const username = inputs.at(0); 
const password = inputs.at(1); 
username.simulate('change', {target: {value: 'Changed'}}); 
password.simulate('change', {target: {value: 'Changed'}}); 

form.simulate('submit'); 
await p 
expect(props.login).toBeDefined(); 
expect(props.history.replace).toBeDefined(); 

// this is success 
expect(props.login).toBeCalled(); 

// this is failure 
expect(props.history.replace).toBeCalled(); 

})