Component nor re rendering for dynamic behaviour

Nitika123 commented 3 years ago

Current behavior

I am writing unit test cases fro my component. I have two selection boxes on my page

selection box 1
selection box 2

Selection box 2 options appear on the basis of selection from 1. Initially the selection box 2 is hidden.

I wrote the following test case which is working fine as initially will be saving only one selection box:

it('check for selection boxes', () => {
    const component = mount(
      <Component />, withReduxContext(store));

    let selectionBoxes = component.find('.selection-boxes');
    expect(selectionBoxes).toHaveLength(1);
    const buttons = selectionBoxes.at(0).find('button');
    expect(buttons).toHaveLength(4);

  });

But when I add the following case of simulating click it fails as it is still showing 1 selection box on the page.

buttons.at(1).simulate('click');
selectionBoxes = component.find('.selection-boxes');
expect(selectionBoxes).toHaveLength(2);

Expected behavior

When I search for selection boxes, it is reporting only 1. I have tried using

update()
setProps()

Your environment

Linux 2012 4.9 Kernel

API

[ ] shallow
[x] mount
[ ] render

Version

library	version
enzyme	3.7.0
react	16.3.0
react-dom	16.3.3
react-test-renderer	16.0.0-0
adapter (below)	1.9.0

Adapter

[x] enzyme-adapter-react-16
[ ] enzyme-adapter-react-16.3
[ ] enzyme-adapter-react-16.2
[ ] enzyme-adapter-react-16.1
[ ] enzyme-adapter-react-15
[ ] enzyme-adapter-react-15.4
[ ] enzyme-adapter-react-14
[ ] enzyme-adapter-react-13
[ ] enzyme-adapter-react-helper
[ ] others ( )

ljharb commented 3 years ago

What is withReduxContext? The second argument to mount is an options object, not a context.

Nitika123 commented 3 years ago

It is function which returns the following

return {
    context: { store },
    childContextTypes: {
      store: PropTypes.object.isRequired
    }
  };

And the store is mocked in the following manner

import configureStore from 'redux-mock-store';
const initialState = {};
const mockStore = configureStore(middlewares);
beforeEach(() => {
    store = mockStore(initialState);
  });

ljharb commented 3 years ago

I'm not sure why childContextTypes would be in that object; mount doesn't look at that property there.

What I'd suggest is using a context provider in the wrappingComponent option. However, you're also using an old version of enzyme (it's on v3.11) and possibly your adapter.

Can you start by upgrading enzyme, and your enzyme adapter, and then see if that fixes the issue?

enzymejs / enzyme