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

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

除了使用CSS选择器查找元素（see here）以外，您还有其他选择。如果您的目标实际上是查看图像是否呈现，则可以尝试app.find（'。userCompanyIcon'）; or 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";
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');

});

Jest测试失败

1 个答案: