Javascript 测试以玩笑而失败

我有一个代码，我必须对它执行测试。在安装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);

});

从“React”导入React；
从“react dom”导入react dom；
从“./App”导入应用程序；
从“酶”导入{shallow，configure}；
从'enzyme-Adapter-react-16'导入适配器；
它（'渲染而不崩溃'，（）=>{
const div=document.createElement（'div'）；
ReactDOM.render（，div）；
});
配置（{adapter:newadapter（）}）；
const tid=“72f988bf-86f1-41af-91ab-2d7cd011db47”；
它（'授权已知租户'，（）=>{
const-app=shallow（）；
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 | });

● 授权已知承租人
TypeError:无法读取未定义的属性“equal”
16 |常数app=浅（）；
17 | const el=app.find（'[src=“microsoft gray.png”]'）；
>18 |期望（el.exists（））等于（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;

import React，{Component}来自'React'；
从“道具类型”导入道具类型；
导入“/App.css”；
从“react bootstrap”导入{网格、行、列、表、面板、图像、选项卡、选项卡、导航、导航项、警报}；
从“lodash”进口；
从“jquery”导入美元；
从“react http Request”导入请求；
从“./components/AdminViewComponent.js”导入{AdminViewComponent}；
从“./components/批发商组件.js”导入{批发商屏幕}；
从“/logo.svg”导入徽标；
类应用程序扩展组件{
render（）{
var url=“./api/user/”+this.props.userName+“/”；
log（“props=“+JSON.stringify（this.props））；
console.log（“url=”+url）；
var userCompanyIcon；
//如果（this.props.tid==“49d3d3cf-cde6-4161-8d6d-1789042d7b01”）{
如果（this.props.tid==“72f988bf-86f1-41af-91ab-2d7cd011db47”| | this.props.tid==“49d3d3cf-cde6-4161-8d6d-1789042d7b01”）{
userCompanyIcon=；
}
返回(
你好，{this.props.firstname}
{userCompanyIcon}
{
（{错误，结果，加载}）=>{
如果（装载）{
返回装载。。。；
}否则{
if（result==null | | result.statusType==4 | | result.statusType==5）{
返回发生未知错误。请重试；
}
否则{
var returnObject=JSON.parse（result.text）；
if（returnObject.isAdmin==false）{
返回；
}
else if（returnObject.isAdmin==true）{
返回；
}
}
}
}
}
);
}
}
导出默认应用程序；

您正在ID#tid上搜索，似乎没有任何ID为#tid的元素。除了有条件地呈现逻辑之外，您正在将tid作为属性传递，并且以后不会使用它

除了使用CSS选择器查找元素（），您还有其他选择。如果您的目标是查看图像是否呈现，您可以尝试app.find（'.userCompanyIcon'）；

或app.find（'[src=“microsoft gray.png”]'）；

如果您确实在检查您的属性是否已设置，那么

app.prop（'tid'）

也会给您租户id

因此，要么：

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”；
它（'授权已知租户'，（）=>{
const-app=shallow（）；
const el=app.find（'.userCompanyIcon'）；
expect（el.exists（））.toEqual（true）；
});

或：

const tid=“72f988bf-86f1-41af-91ab-2d7cd011db47”；
它（'授权已知租户'，（）=>{
const-app=shallow（）；
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');

});

const tid=“72f988bf-86f1-41af-91ab-2d7cd011db47”；
它（'授权已知租户'，（）=>{
const-app=shallow（）；
const tid=app.prop（'tid'）；
预期（tid）toEqual（'72f988bf-86f1-41af-91ab-2d7cd011db47'）；
});

谢谢。我的目标是检查，如果用户登录时试图访问网站，只有当他试图与已知租户一起访问时，他才会被访问。此外，在App.js中使用tid作为this.props.tid。这还不足以在我的测试中使用它吗？请尝试编辑我的测试，以便它可以工作吗？这将是一个很好的例子“我不知道果阿到底想干什么

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');

});