我正在尝试模拟对服务的调用,但我正在使用以下消息:模块工厂jest.mock()不允许引用任何超出范围的变量.
我正在使用带有ES6语法,开玩笑和酶的babel.
我有一个简单的组件Vocabulary,它VocabularyEntry从a 获取-Objects 列表vocabularyService并呈现它.
import React from 'react';
import vocabularyService from '../services/vocabularyService';
export default class Vocabulary extends React.Component {
render() {
let rows = vocabularyService.vocabulary.map((v, i) => <tr key={i}>
<td>{v.src}</td>
<td>{v.target}</td>
</tr>
);
// render rows
}
}
这vocabularyServise很简单:
import {VocabularyEntry} from '../model/VocabularyEntry';
class VocabularyService {
constructor() {
this.vocabulary = [new VocabularyEntry("a", "b")];
}
}
export default new VocabularyService();`
现在我想vocabularyService在测试中嘲笑:
import {shallow} from 'enzyme';
import …我在理解酶的浅层渲染时遇到了问题.
我有一个WeatherApplication具有子组件的组件CitySelection.该CitySelection接收特性selectedCity是保持在WeatherApplicationS状态.
组件:
export default class WeatherApplication extends React.Component {
constructor(props) {
super(props);
this.state = {
city : "Hamburg"
}
}
selectCity(value) {
this.setState({
city: value
});
}
render() {
return (
<div>
<CitySelection selectCity={this.selectCity.bind(this)} selectedCity={this.state.city} />
</div>
);
}
}
我毫不犹豫地测试了CitySeleciton存在并且selectedCity是"汉堡"并且正确的功能被传递.
现在我想测试selectCity方法的行为.
it("updates the temperature when the city is changed", () => {
var wrapper = shallow(<WeatherApplication/>);
wrapper.instance().selectCity("Bremen");
var citySelection = wrapper.find(CitySelection);
expect(citySelection.props().selectedCity).toEqual("Bremen");
});
这个测试失败了,因为价值citySelection.props().selectedCity仍然是汉堡.
我检查了再次调用render …
我想知道是否可以将参数传递给反应入口点。
我的入口点如下所示：
module.exports = {
entry: "./js/components/Application.js",
output: {
path: "./dist",
filename: "bundle.js"
},
// ...
}
我的应用程序.js：
import React from 'react';
import ReactDOM from 'react-dom';
import AnotherComponent from './AnotherComponent';
ReactDOM.render(<AnotherComponent />, document.getElementById('content'));
不是我将我的应用程序与 webpack 捆绑在一起，并将该捆绑包包含在另一个应用程序中。该应用程序提供了一个 id 为“content”的 div：
<body>
<div id="content"></div>
<script src="bundle.js" />
</body>
我知道我可以做类似的事情
<script src="bundle.js" myargument="somevalue" />
但我怎样才能获得这个值并将其AnotherComponent作为属性传递给反应组件呢？
我尝试使用fetch-mock和开玩笑模拟提取呼叫。我的提取调用是带有请求正文和两个标头的POST请求。
我的代码如下所示：
let payload = JSON.stringify({"some" : "value"});
let headers = new Headers({"Accept": "application/json", "Content-Type": "application/json"});
let options = {method: "POST", body: payload, headers: headers};
fetch('http://someUrl', options)
.then(response => response.json())
.then(data => {this.data = data})
.catch(e => {console.log("exception", e)});
我在测试中尝试了以下方法：
let fetchMock = require('fetch-mock');
let response = {
status: 200,
body: {data : "1234"}
};
let payload = JSON.stringify({"some" : "value"});
let headers = new Headers({"Accept": "application/json", "Content-Type": "application/json"});
let options = {"method": "POST", "body": payload, "headers": headers}; …reactjs ×4
jestjs ×2
unit-testing ×2
babeljs ×1
enzyme ×1
fetch ×1
jasmine ×1
javascript ×1
webpack ×1