тестирование не проходит с Jest

Question

У меня есть код, для которого я должен выполнить тесты.После установки Jest и использования его с энзимом для тестирования различных компонентов, теперь я должен убедиться, что только авторизованные арендаторы могут получить доступ к моему веб-сайту.Как клиентская, так и серверная части построены на Azure.

Все, что я хочу сделать, это проверить, что известный арендатор (см. App.js) будет авторизован.

Для этого тестирования арендаторов,Я должен использовать App.js.

Я не могу понять, по какой причине мой тест не прошел?

App.test.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

it('renders without crashing', () => {
    const div = document.createElement('div');
    ReactDOM.render(<App />, div);
});

configure({ adapter: new Adapter() });

const tid = "72f988bf-86f1-41af-91ab-2d7cd011db47";
it('Authorizes a known tenant', () => {
const app = shallow(<App tid={tid} />);
const el = app.find('[src=microsoft-gray.png]');
expect(el.exists()).to.equal(true);

});

Ошибка:

  ● Authorizes a known tenant


TypeError: Cannot read property 'equal' of undefined

  16 |     const app = shallow(<App tid={tid} />);
  17 |     const el = app.find('[src="microsoft-gray.png"]');
> 18 |     expect(el.exists()).to.equal(true);
     |     ^
  19 | });

App.js:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import './App.css';
import { Grid, Row, Col, Table, Panel, Image, Tabs, Tab, Nav, NavItem, Alert } from 'react-bootstrap';
import _ from 'lodash';
import $ from 'jquery';
import Request from 'react-http-request';
import { AdminViewComponent } from './components/AdminViewComponent.js';
import { WholeScreen } from './components/WholeScreenComponent.js';
import logo from './logo.svg';

class App extends Component {
    render() {
        var url = "./api/user/" + this.props.userName + "/";
        console.log("props = " + JSON.stringify(this.props));
        console.log("url = " + url);
        var userCompanyIcon;
        //if (this.props.tid == "49d3d3cf-cde6-4161-8d6d-1789042d7b01"){
        if (this.props.tid == "72f988bf-86f1-41af-91ab-2d7cd011db47" || this.props.tid == "49d3d3cf-cde6-4161-8d6d-1789042d7b01") {
            userCompanyIcon = <Image className="userCompanyIcon" src="microsoft-gray.png" responsive />;
        }

        return (
            <div className="App">
                <div className="App-header">
                    <Grid>
                        <Row>
                            <Col xs={6} sm={6} md={6}>

                            </Col>
                            <Col xs={2} sm={2} md={2}>

                            </Col>
                            <Col xs={4} sm={4} md={4}>

                                <div className="Hello">Hello, {this.props.fisrtName} </div>
                            </Col>

                        </Row>
                        <Row>
                            <Col xs={4} sm={4} md={4}  >
                                {userCompanyIcon}
                            </Col>
                            <Col xs={4} sm={4} md={4}  >

                            </Col>
                            <Col xs={4} sm={4} md={4}>
                                <Image className="companyIcon" src="MatanTransperent.png" responsive />
                            </Col>
                        </Row>
                    </Grid>
                </div>


                <div className="App-content">

                    <Request
                        url={url}
                        method='get'
                        accept='application/json'
                        headers={{ 'Authorization': 'Bearer ' + this.props.token }}
                        verbose={true}>
                        {
                            ({ error, result, loading }) => {
                                if (loading) {
                                    return <div>Loading...</div>;
                                } else {
                                    if (result == null || result.statusType == 4 || result.statusType == 5) {
                                        return <div> An unknown error has occured. Please try again.  </div>;
                                    }
                                    else {
                                        var returnObject = JSON.parse(result.text);
                                        if (returnObject.isAdmin == false) {
                                            return <WholeScreen data={returnObject.DonationsList} />;
                                        }
                                        else if (returnObject.isAdmin == true) {
                                            return <AdminViewComponent token={this.props.token} />;

                                        }
                                    }
                                }
                            }
                        }
                    </Request>
                </div>
            </div>
        );
    }
}

export default App;

Answer 1

Вы ищете по идентификатору #tid, и, похоже, у вас нет элементов с идентификатором #tid.Вы передаете tid как свойство и впоследствии не используете его, кроме логики условного рендеринга.

У вас также есть другие варианты, кроме использования селекторов CSS для поиска вашего элемента ( см. Здесь ).Если ваша цель на самом деле посмотреть, визуализируется ли изображение, вы можете попробовать app.find ('. UserCompanyIcon'); or app.find('[src="microsoft-gray.png"]');

Если вы действительно проверяете, установлено ли ваше свойство, то app.prop('tid') также дастВы - идентификатор арендатора.

Так что либо:

const tid = "72f988bf-86f1-41af-91ab-2d7cd011db47";
it('Authorizes a known tenant', () => {
    const app = shallow(<App tid={tid} />);
    const el = app.find('.userCompanyIcon');
    expect(el.exists()).toEqual(true);

});

Или:

const tid = "72f988bf-86f1-41af-91ab-2d7cd011db47";
it('Authorizes a known tenant', () => {
    const app = shallow(<App tid={tid} />);
    const el = app.find('[src="microsoft-gray.png"]');
    expect(el.exists()).toEqual(true);

});

Или ниже, но это не слишком много проверяет:

const tid = "72f988bf-86f1-41af-91ab-2d7cd011db47";
it('Authorizes a known tenant', () => {
    const app = shallow(<App tid={tid} />);
    const tid = app.prop('tid');
    expect(tid).toEqual('72f988bf-86f1-41af-91ab-2d7cd011db47');

});