unit testing using enzyme: Pass react props as event to wrapper

jest test props
testing react components with jest and enzyme
enzyme test props passed to child
testing stateless components react enzyme
enzyme test prop function
enzyme simulate keypress
jest test functional component
jest enzyme example

My test fail because I don't know what to declare in the onChange value,

describe("App", function() {
  const wrapper = shallow(<App />);

  it("should have an input", function() {
    expect(
      wrapper.contains(<input type="text" onChange={null} />)
    ).toBeTruthy();
  });
});

I just have this in my component

<input type="text" onChange={this.changeInput} />

should have an input test shouldn't involve onChange at all. It can be tested similarly to how the reference suggests:

expect(wrapper.find('input[type="text"]')).to.have.lengthOf(1);

onChange can be tested in another test, similarly to how is shown in this question.

Testing a function (was clicked) when passed as a prop · Issue #915 , My test fail because I don't know what to declare in the onChange value, describe​("App", function() { const wrapper = shallow(<App />); it("should have an input",  Enzyme does the same when the component is rendered initially using mount or shallow and when a component is updated using setProps. If however an event happens outside of an Enzyme method call, such as directly calling an event handler (eg. the button's onClick prop), then Enzyme will not be aware of the change. In this case, your test will need to trigger execution of state updates and effects and then ask Enzyme to refresh its view of the output.

What I would do here is to firstly check that the input element exists:

it('verifies that an input element is rendered', () => {
  expect(wrapper.exists('input')).toBeTruthy();
});

Then, with that verified, separately verify the onChange function exists. I'm not someone who supports having multiple verifications in a single it statement simply because if any of the expect statements trigger a failure, then all expect statements below that are never carried out. So I'd use a separate it as follows:

it('verifies that an onChange function is set`, () => {
  expect(typeof wrapper.find('input').prop('onChange')).toBe('function');
});

Another option is to set a mock function for your onChange prop and verify that it's invoked correctly as follows:

const testOnChange = jest.fn();
const wrapper = mount(<App onChange={testOnChange} />);

it('verifies that the onChange function is invoked', () => {
  wrapper.find('input').prop('onChange')();
  expect(testOnChange.mock.calls).toHaveLength(1);
});

simulate(event[, data]) · Enzyme, Here's my function react component, two props passed in, the second is a function that is passed up from the parent container. So a click on the  b. We use enzyme’s shallow renderer to render the Paragraph component. The shallow renderer is perfect for unit test as it doesn’t render any child components allowing us to focus testing in one component (This will be made clear in the following tests). Then our wrapper constant will contain all the nodes of this component. c.

you can just expect(wrapper.find('input').length).toBe(1)

not sure about syntax or function names but it's there :)

Testing React Components with Jest and Enzyme- In Depth, Simulate events on the root node in the wrapper. args ( Any [optional]): A mock event object that will get passed through to the event handlers. class Foo extends React.Component { constructor(props) { super(props); this.state = { count​: 0 }; Keep in mind that if the code you are testing uses the event for something like,  The next test, I am using Enzyme again to check that the SearchResults component doesn’t break even without the articles props being passed in. We do this by checking that there are no < li> tags as this would have been rendered if articles had data in and being passed through to SearchResults component.

How to Test React Components using Jest and Enzyme, Everything you should know about testing React components using Jest & Enzyme. they are self-completed and can be used separately as a single unit. Don't test the wrapper, just analyze and test them separately. pass necessary props => render component => simulate event => expect a certain  Enzyme provides methods to render and traverse components so we can test assertions that deal with React rendering, mounting and events. Keep in mind, this isn’t the only way to get to unit testing.

Testing Custom Events With Enzyme (React), First I will show you the functional app code, followed by unit tests and then… collapse it to just one word as I did previously:let value = event.target.value The articles props get pass in and we map through all the results in articles. to shallow() method from Enzyme and store is in a wrapper variable. Unit Testing in ReactJS using Jest and Enzyme Run the test – Write the minimum code required to pass the test. Every component of your React application that lacks unit tests becomes a

Writing Jest Tests for React Components · Reaction Docs, In this blog we will learn how to test custom events in react. In Enzyme simulate function is used to trigger the events on the wrapper. the internal method or an event which is attached to TogglableComponent and also which is passed as props to it. Unit testing api calls in React , Enzyme and Jest. The documentation and examples for enzyme use mocha and chai, but you should be able to extrapolate to your framework of choice. If you are interested in using enzyme with custom assertions and convenience functions for testing your React components, you can consider using: chai-enzyme with Mocha/Chai. jasmine-enzyme with Jasmine. jest-enzyme

Comments
  • You can try onChange={() => jest.fn()}
  • how about really straightforward expect(wrapper).toMatchSnapshot()? it checked much more attributes/components you can hard-code in your expect(wrapper.find(...)).to
  • @skyboyer I try to convince myself even that make sense, test ui is strange to me, because once ui is there, means it will be there, I'm ok to test functionality but test ui existence seems too much work.
  • that's why you definitely should take a look into testing with snapshots :)
  • what if input is wrapped by a higher order component says <MyInput />?
  • Then you assert that there's wrapper.find(MyInput) and test how MyInput works in another test. That's proper unit testing strategy.
  • what if MyInput is just a stateless component, do we even need to test those?
  • Automated tests are intended to replace human eyes with machine work. Writing unit tests is supposed to be tedious. It saves time on the large scale when you're bashing your head for hours trying to figure out why tests fail and debugging them - that's when this becomes really tedious. The more detailed unit tests are, the more efficient troubleshooting is. I'd suggest to read more on unit tests and how they differ from other kinds of tests.
  • @Hoknimo Then tests are fixed often to pass. It's much easier to fix red test that should be green than to fix green test that should be red. You can balance between unit and e2e tests and make unit tests less or more restrictive for specific project, but this depends on the project.
  • I see. Good you seperate it out, but this test verifies that an "onChange" function is set is needed? I usually only test if it's called, why that's the point of testing thing that will 100% work?
  • Well this was just an example of one way you can verify that onChange has, indeed, been passed down. The OP could also test that it's invoked using a mocked function. That is a better option. I've updated my answer to include that.
  • any reason not using toHaveBeenCalled?
  • None whatsoever. You can use either one.
  • another question, why not use stimulate('onChange')?