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

您正在搜索 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');

});