Enzyme: setState for connected components.

[supritashankar]

Browser.tsx

export class UBrowserLoader extends React.Component<IProps, IState> {
  public state = {
    loading: true;
  }
  public render() {
    const {errorState} = this.props;
    if (errorState) {
      // some code
      return <div className="error"></div>
    }
    if (this.state.loading) {
      // some code
      return <div className="loading"></div>.
    }
    return <div className="browser-body">Hello</div>
}
export const BrowserLoader = connect(mapStateToProps, mapDispatchToProps)(UBrowserLoader)

My tests look like this

describe("Browser tests", function() {
  test("test the browser loader for error case", () => {
        const mockStore = configureMockStore([thunk]);
        const store = mockStore({
            errorState: {
                error: "internal error"
            }
        });

        const wrapper = mount(<Provider store={store}><BrowserLoader/></Provider>);
        expect(wrapper.find('.error')).toHaveLength(1);
        expect(wrapper.find('.browser-body')).toHaveLength(0);
    });
  test("tests the loader on the browser", () => {
    const mockStore = configureMockStore([thunk]);
        const store = mockStore({errorState: {}});
        const wrapper = mount(<Provider store={store}><BrowserLoader/></Provider>);
        expect(wrapper.find('.loading')).toHaveLength(1); // this works
        expect(wrapper.find('.error')).toHaveLength(1); // this works
        wrapper.setState({loading: false})
        expect(wrapper.find('.loading')).toHaveLength(0); // does not work!!!!! it does not setState on the child component

How do I get this to work? Any ideas?
Any help will be appreciated!

cc @lelandrichardson - I saw your comments regarding this on another github issue - where you said to test the flux cycle one can use mount. But I don't understand how to do it in this case.

[ljharb]

Can you explain if (errorState) {..<div class="error"></div>}, which looks like very invalid code? Is that some kind of TypeScript thing?

[supritashankar]

@ljharb I corrected it. it was my bad.

[ljharb]

@supritashankar again tho, you've just got an element hanging out there, it's not returned or used.

[supritashankar]

@ljharb I have corrected it. This is to just give the idea. How do I setState on the child pure component?

[ljharb]

Shallow-render the wrapper, and use .dive() - then you have an enzyme wrapper around the wrapped component.

[dabit1]

I finally found a very good solution to get a wrapper from a decorated component. For shallowed components you can use dive() but there is no similar method for mounted components. This is the solution I did:

const wrapper = mount(shallow(<MyComponent />).get(0))

Works like a charm :)

[debo07]

Shallow-render the wrapper, and use .dive() - then you have an enzyme wrapper around the wrapped component.

And what do I do if I have refs in the same component and that's also needs to be tested.

[ljharb]

@debo07 use ref callbacks (since string refs are deprecated), and unit test those.