Content of React modal dialogs is not available to Enzyme tests using mount()

Question

I have a React component with a modal dialog (built using reactstrap, but others have reported similar problems with react-bootstrap and other type

Answer 1

In case you are using an older version of Enzyme, you can pass the container element to mount where you want your Modal to be rendered, like this:

import React from 'react'
import MyModal  from './MyModal'
import { mount } from 'enzyme'

describe(() => {
    let wrapper;
    beforeEach(() => {
        const container = document.createElement("div");
        document.body.appendChild(container);
        wrapper = mount(  , {attachTo: container});
    });

    it('renders correctly', () => {
        expect(wrapper).toMatchSnapshot();

        // Passes
        expect(wrapper.find('.outside')).toHaveLength(1);

        // Passes now
        expect(wrapper.find('.inside')).toHaveLength(1);
    });

})