Фермент не может найти детей, отображаемых внутри компонентов React Apollo Query - PullRequest
Новая
       12

Фермент не может найти детей, отображаемых внутри компонентов React Apollo Query

0 голосов
/ 02 июня 2018

Подскажите, как тестировать компоненты запроса apollo с помощью Enzyme.Запрос использует isomorphic-fetch для извлечения данных из базы данных.Вот мой пример тестового кода: 

describe('Query', async () => {

    it('exists',  async () => {

        let wrapper = await mount(
            (
                <TestProvider>
                    <Query query={gql`...`}>
                        {
                           ({data:{something}})=>
                                 <CustomComponent something={something} />
                        }
                    </Query>
                </TestProvider>
            )
        );
        // return false
        expect(wrapper.find(CustomComponent).exists()).to.be.true
    })
});

Почему Enzyme не может найти CustomComponent внутри компонента Query?Однако следующий пример будет работать, когда дочерние элементы не являются функциями: 

describe('Component', async () => {
    it('exists',  async () => {
        let wrapper = await mount(
            (
                <TestProvider>
                    <div><CustomButton/></div>
                </TestProvider>
            )
        );
        // return true
        expect(wrapper.find(CustomButton).exists()).to.be.true
    })
});

Ответы [ 2 ]

0 голосов
/ 05 июня 2018

Возможно использование классического обратного вызова сработает, см. Ниже.

Я не уверен насчет общей стратегии тестирования с использованием apollo здесь.Это может быть что-то, где тесты пользовательского интерфейса будет намного лучше.Когда вы хотите протестировать свои компоненты в модульных тестах (которые, например, мы очень редко выполняем на работе), тестируйте только сами компоненты, а не запросы внутри.С новым рендерингом prop API React Apollo это стало намного сложнее, но, на мой взгляд, это потому, что это очень непопулярно для модульных тестов компонентов в этом смысле.В качестве альтернативы вы можете взглянуть на реагирующая библиотека тестирования , которая имеет функцию, которая называется waitForElement и ведет себя немного больше, чем утверждения в тестах пользовательского интерфейса, как в Cypress. 

it('exists',  done => {

    let wrapper = await mount(
        (
            <TestProvider>
                <Query query={gql`...`}>
                    {
                       ({data:{something}})=> {
                           process.nextTick(check);
                           return <CustomComponent something={something} />;
                    }
                </Query>
            </TestProvider>
        )
    );
    function check() {
      expect(wrapper.find(CustomComponent).exists()).to.be.true
      done();
    }
})
0 голосов
/ 04 июня 2018

Вот мое временное решение для асинхронного рендеринга в ферменте.Я должен использовать wrapper.updated() в каждой it функции: 

describe('Query', () => {

    let wrapper;

    before( ()=>{
        wrapper = mount(
            (
                <TestProvider>
                    <Query query={gql`...`}>
                        {
                           ({data:{something}})=>
                                 <CustomComponent something={something} />
                        }
                    </Query>
                </TestProvider>
            )
        );
    })

    it('exists', done => {
        setTimeout( ()=>{
            wrapper.update();
            console.log(wrapper.debug());
            expect(wrapper.find(CustomImage).length).to.be.above(0);
            done();
        },1000)
    })
});

У вас есть альтернативные предложения?Я хотел бы избежать использования setTimeout.

...