How to test prop update in Reactjs

Asked

Viewed 116 times

0

I created a component Button which has a function onClick and a prop disabled. The function defines a state isLoading as true, and prop receives the value of this state, that is, while the page is pressing the button will be disabled.

However, when simulating the click, the state and prop are not updated, so I can’t test to see if the button has actually been disabled.

index.jsx

<Button
  onClick={handleClick}
  data-testid="backward-button"
  disabled={this.state.isLoading}
/>

index.testjs.

const wrapper = shallow(<ParentComponent />);
const button = wrapper.find('[data-testid="backward-button"]');

button.simulate('click');
wrapper.instance().forceUpdate();

expect(button.prop('disabled')).toBeTruthy();

The question is: how can I verify the value of the prop disabled after the state is changed?

I’m using Jest and Enzyme for the tests.

javascript react jest

  • Did not work this test? presents some error?

  • expect(button.prop('disabled')).toBe(true); have tried?

  • I hadn’t tried yet, thanks for the help !

  • Yes, he says the test failed, That way you propose it didn’t work, it keeps giving false

  • It is not that it failed is that the state of the component has not changed, so it must something in this type ... failure in this case is not the problem, the problem you want a component change that is not occurring. expect(button.prop('disabled')).toBe(false); place false to see if it happens!

No answers

Browser other questions tagged javascript react jest

You are not signed in. Login or sign up in order to post.