Jest测试失败 [英] testing fails with Jest
问题描述
我有一个代码，我必须对其进行测试。安装Jest并将其与酶一起用于测试不同的组件后，现在我必须检查只有授权的租户才能访问我的网站。客户端和服务器端都是在Azure上构建的。
I have got a code for which I have to perform tests on. After installing Jest and using it with enzyme for testing different components, now I have to check that only Authorized tenants can access my website. Both client side and server side are built on Azure.
我想要做的就是测试一个已知的租户（参见App.js）是否会被授权。
All I want to do is to test that a known tenant (See App.js) will be authorized.
对于这个租户测试，我应该使用App.js。
For this tenants testing, I should use the App.js.
我无法弄清楚我的测试是什么原因失败？
I cannot figure out for what reason my test fails ?
App.test.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;
推荐答案
您正在搜索ID #tid，似乎就像你没有任何ID为#tid的元素一样。除了有条件地渲染逻辑之外，你将tid作为属性传递并且之后不再使用它。
You are searching on ID #tid, and it seems like you don't have any elements that have an ID of #tid. You are passing tid as an property and aren't using it afterwards, aside from you conditionally rendering logic.
除了使用CSS选择器查找元素之外，还有其他选项（见此处）。如果您的目标实际上是查看图像是否呈现，您可以尝试app.find（'。userCompanyIcon'）; 或app.find（'[src =microsoft-gray.png]'）;
You also have other options than using CSS selectors to find your element (see here). If your goal is actually to see if the image renders you could try app.find('.userCompanyIcon');or app.find('[src="microsoft-gray.png"]');
如果您确实在检查您的房产是否已设置，那么 app.prop（'tid'）也会给你租户ID。
If you were actually checking whether your property is set then app.prop('tid') would also give you the tenant 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);
});
或者以下，但这并没有多大考验：
Or the below, but this doesn't test much:
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测试失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
