Передача контекста динамически добавленного дочернего элемента в ReactJS

Question

Я пытаюсь передать контекст компоненту React, но поскольку я тестирую Enzyme, я хотел бы добавить компонент в его родительский динамически, чтобы я мог проверить его состояние , Тест выглядит следующим образом:

describe('<BeaconConfig />',() => { 
    it('inherits the config from BeaconConfig',() => { 
    mount(<BeaconConfig persistent><div id="parent"></div></BeaconConfig>, { attachTo: document.body }); 
    const wrapper = mount(<Beacon/>, { attachTo: document.getElementById('parent') }); 
    expect(wrapper.state('persistent')).to.be(true); 
    }); 
}); 

тест завершается неудачей, поскольку persistent свойство состояния Beacon компонента является undefined, хотя он должен быть унаследован от BeaconConfig через контекст.

Когда я пытаюсь положить Beacon непосредственно внутри JSX, когда я устанавливаю BeaconConfig то он работает отлично, но в этом случае Фермент не позволит мне получить в компонентном состоянии Beacon, так как он не является корень.

Нормально ли, что React не распространяет контекст на мой компонент, когда я добавляю его динамически к его родительскому?

Answer 1

Вот полный тест, который я закончил с использованием:

describe('Context',() => { 
    let wrapper; 
    let parent; 
    const open = stub().returns({}); 
    const mockIndexedDB = { open }; 
    const config = mount(<BeaconConfig persistent position="bottom" indexedDB={mockIndexedDB} />); 

    beforeEach(() => { 
    parent = document.createElement('div'); 
    document.body.appendChild(parent); 
    wrapper = mount(<Beacon>some text</Beacon>, { 
     attachTo: parent, 
     context: config.instance().getChildContext() 
    }); 
    }); 

    afterEach(() => { 
    wrapper.detach(); 
    document.body.removeChild(document.body.firstChild); 
    }); 

    it('overrides the default values with the context if any',() => { 
    expect(wrapper.state('persistent')).to.be(true); 
    expect(wrapper.state('position')).to.be('bottom'); 
    expect(open.calledOnce).to.equal(true); 
    }); 
}); 

@STRML был хорошее предложение, но я не думаю, что можно получить доступ к состоянию внекорневой компоненты.

Вместо этого я создаю экземпляр BeaconConfig в изоляции и захватить его контекст ребенок, проходя которые вручную Beacon с помощью параметра mountoptions. Это проверяет, что BeaconConfig создает правильный дочерний контекст и что Beacon использует контекст правильно. Он не проверяет, что BeaconConfig передает конфигурацию до Beacon, когда последний является потомком, но мы можем предположить, что это само собой разумеющееся, поскольку это базовая функциональность React.

Answer 2

Это нормально, что React не распространяет контекст - он не смотрит на DOM и не разграничивает его с VDOM таким образом.

Вы хотите сделать это ребенком в начальном горе, и использовать .find() или .children() методов MountWrapper (docs) копаться детьми, найти маяк и сделать ваши утверждения.