enzyme

I am trying to test whether componentWillMount was called and for that my test is test('calls `componentWillMount` before rendering', () => { let fn = jest.fn(SomeComponent.prototype.componentWillMount) mount(<SomeComponent />) expect(fn).toHaveBeenCalled() }) But even though the componentWillMount method is called, the test does not pass. What am I missing here? I don't know if the other answers have helped with your question, but you shouldn't need to test componentWillMount. React should already do that testing for you. More relevant to your testing would be to test the functions or actions

Given a simple component: export default class SearchForm extends Component { constructor(props) { super(props) this.state = { query: '' } } onSubmit = (event) => { event.preventDefault() history.push(`/results/${this.state.query}`, { query: this.state.query }) } render() { return ( <form onSubmit={this.onSubmit}> <input type="text" value={this.state.query} onChange={event => this.setState({ query: event.target.value })} /> <button>Search</button> </form> ) } } And the test: describe('SearchForm Component', () => { it('should navigate to results/query when submitted', () => { const wrapper =

I am using Jest and Enzyme to test a React checkbox component. This is my test: it('triggers checkbox onChange event', () => { const configs = { default: true, label: 'My Label', element: 'myElement', } const checkbox = shallow( <CheckBox configs={configs} /> ) checkbox.find('input').simulate('click') }) I get this error however when running the test: TypeError: Cannot read property 'target' of undefined This is the input for my component: <div className="toggle-btn sm"> <input id={this.props.configs.element} className="toggle-input round" type="checkbox" defaultChecked={ this.props

I have a React component which contains some other components that depend on access to a Redux store etc., which cause issues when doing a full Enzyme mount. Let's say a structure like this: import ComponentToMock from './ComponentToMock'; <ComponentToTest> ...some stuff <ComponentToMock testProp="This throws a warning" /> </ComponentToTest> I want to use Jest's .mock() method to mock out the sub-component, so that it is not a concern for the test. I'm aware that I can mock out a straight component with something like: jest.mock('./ComponentToMock', () => 'ComponentToMock'); However, as this

Using the code from this answer to solve clicking outside of a component: componentDidMount() { document.addEventListener('mousedown', this.handleClickOutside); } componentWillUnmount() { document.removeEventListener('mousedown', this.handleClickOutside); } setWrapperRef(node) { this.wrapperRef = node; } handleClickOutside(event) { if (this.wrapperRef && !this.wrapperRef.contains(event.target)) { this.props.actions.something() // Eg. closes modal } } I can't figure out how to unit test the unhappy path so the alert isn't run, what i've got so far: it('Handles click outside of component', () =>

I created a new React application by create-react-app and I wanted to write a unit test to a component named "MessageBox" that I created in the application. This is the unit test that I wrote: import MessageBox from "../MessageBox"; import { shallow } from 'enzyme'; import React from 'react'; test('message box', () => { const app = {setState: jest.fn()}; const wrapper = shallow(<MessageBox app={app}/>); wrapper.find('button').at(0).simulate('click'); expect(app.setState).toHaveBeenLastCalledWith({modalIsOpen: false}); }); I also added a file under 'src' folder named 'setupTests.js' with the