enzyme

I'm trying to write a simple test for a simple React component, and I want to use Jest to confirm that a function has been called when I simulate a click with enzyme. According to the Jest docs, I should be able to use spyOn to do this: spyOn . However, when I try this, I keep getting TypeError: Cannot read property '_isMockFunction' of undefined which I take to mean that my spy is undefined. My code looks like this: import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { myClickFunc = () => { console.log('clickity clickcty') }

I have a react component(this is simplified in order to demonstrate the issue): class MyComponent extends Component { handleNameInput = (value) => { this.searchDish(value); }; searchDish = (value) => { //Do something } render() { return(<div></div>) } } Now I want to test that handleNameInput() calls searchDish with the provided value. In order to do this I would like to create a jest mock function that replaces the component method. Here is my test case so far: it('handleNameInput', () => { let wrapper = shallow(<MyComponent/>); wrapper.searchDish = jest.fn(); wrapper.instance()

I recently wanted to test that some custom method gets conditionally called in the componentDidMount method of a React component. componentDidMount() { if (this.props.initOpen) { this.methodName(); } } I'm using Jest as my testing framework, which includes jest.fn() for mocks/spies. I've read that this would be fairly trivial to test with Sinon, by doing something like the following: sinon.spy(Component.prototype, "methodName"); const wrapper = mount(<Component {...props} />); expect(wrapper.instance().methodName).toHaveBeenCalled(); I'm trying to recreate this with Jest like so: Component

prior to posting this question, I tried to search in sqa stackexchange but I found no post about shallow and render there, so I hope someone can help me out here. When should I use shallow and render in testing react components? Based on the airbnb docs, I've made some opinions on the difference of the two: Since shallow is testing components as a unit , so it should be used for 'parent' components. (ex. Tables, Wrappers, etc.) Render is for child components. The reason I asked this question, is that I'm having a hard time to figure out which one I should use (though the docs say that they're

React v15.1.0 Jest v12.1.1 Enzyme v2.3.0 I'm trying to figure out how to test a component that calls a promise in a function invoked by a click. I was expecting Jest's runAllTicks() function to help me out here, but it doesn't seem to be executing the promise. Component: import React from 'react'; import Promise from 'bluebird'; function doSomethingWithAPromise() { return new Promise((resolve) => { setTimeout(() => { resolve(); }, 50); }); } export default class AsyncTest extends React.Component { constructor(props) { super(props); this.state = { promiseText: '', timeoutText: '' }; this

I'm testing a react component with Mocha and Enzyme. Here is the component (shortened for simplicity of course): class New extends React.Component { // shortened for simplicity handleChange(event) { // handle changing state of input const target = event.target; const value = target.value; const name = target.name this.setState({[name]: value}) } render() { return( <div> <form onSubmit={this.handleSubmit}> <div className="form-group row"> <label className="col-2 col-form-label form-text">Poll Name</label> <div className="col-10"> <input className="form-control" ref="pollName" name="pollName"