Метод «текст» предназначен для запуска на 1 узле.0 найдено вместо - PullRequest
Новая
       12

Метод «текст» предназначен для запуска на 1 узле.0 найдено вместо

0 голосов
/ 26 февраля 2019

enter image description here

[Create-React-App] Jest и Enzyme (3.9.0) не может найти мой<Button/> Элемент из Auth.jx контейнера .. Приложение должно визуализировать контейнер Auth if(!isAuthernticated), и кнопка должна быть отключена, если не вводится никаких данных.

Я пытался ShallowWrapper :: dive () но я получаю ошибку типа

TypeError: SHallowWrapper::dive() can only be called on components

Auth.jsx 

    //...
    let errorMessage = null;
    let button=<Button id='Disabled' btnType="Success" disabled={false}>Disabled</Button>;
    let authRedirect = null;

    if (this.props.isAuthenticated) {
        authRedirect = <Redirect to={this.props.authRedirectPath}/>
    }
        if (this.state.controls.username.value && this.state.controls.password.value){

           button=<Button id='Login' btnType="Success">Login</Button>
          }
    return (
         <div>
        {authRedirect}
                    <form onSubmit={this.handleSubmit}>
                       {form}
                    {button}
                    </form>
        </div>
    )
}
 //...

Auth.test.js 

import React from 'react';
import {shallow} from 'enzyme';
import Auth from '../containers/Auth/Auth';
import Button from '../components/Button/button';
import Input from '../components/Input/input';

describe('<Auth/>',() =>{
    let wrapper;
    beforeEach(()=>{
        wrapper=shallow(<Auth authRedirectPath='/' isAuthenticated={false}/>).dive()
    })

    //Test 1
    it('should render disabled button if no input has been specified ',()=>{
        expect(wrapper.find(Button).text()).toEqual('Disabled')
    });
})

Ответы [ 2 ]

0 голосов
/ 27 февраля 2019

Я не думаю, что вы должны звонить dive() на wrapper в вашем тесте.Вместо этого вы должны отрисовать wrapper , а затем вызвать dive() или render() на найденном Button, чтобы проверить его текст.

Итак, сначала: 

wrapper = shallow(<Auth authRedirectPath='/' isAuthenticated={false} />)

Затем, когда вы хотите find(Button) и проверить его текст при визуализации, вы должны выполнить одно из следующих действий: 

expect(wrapper.find(Button).dive().text()).toEqual('Disabled')

// OR

expect(wrapper.find(Button).render().text()).toEqual('Disabled')

Чтобы продемонстрировать это, я 'Вы воссоздали скелет вашего кода здесь в этой песочнице кода . Вы можете увидеть, в частности, в Auth.test.js, как я изменил ваш исходный тест с моими строками кода выше.Если вы нажмете «Тесты» на нижней панели инструментов, вы увидите, что тест пройден.

Если вы войдете в Auth.jsx и измените значения username и password - тем самым влияя наButton текст - тогда тест не пройден.

0 голосов
/ 26 февраля 2019

Мой комментарий выше показал, что вы используете Redux connect HOC на компоненте.Вот почему вы не можете получить доступ к нужному компоненту, так как это уровень глубже в дереве.

Я бы предложил прочитать мою статью на Средняя , в которой вы можете найти некоторые подробности о фактическомпроблема, а также соответствующее решение.

РЕДАКТИРОВАТЬ

Если вы все еще испытываете ту же проблему, я бы предложил следующее:

Предположим, что ваш компонент Auth выглядит примерно так. 

import React, { Component } from 'react';
import { connect } from 'react-redux';

export class Auth extends Component {
   // Something happens here.
}

export default connect(mapStateToProps, mapDispatchToprops)(Auth);

Обратите внимание, что я использовал ключевое слово export в обоих случаях.При этом вы можете протестировать соответствующий компонент без какого-либо подключения к Redux, и это также уменьшает сгенерированное дерево.

Обратите внимание на импорт именованного класса экспорта в тестовом файле: 

...
import { Auth } from './Auth';
...
...