如何在创建react应用程序中测试简单函数？
如何在创建react应用程序中测试简单函数？
提问于 2018-09-11 10:37:18
我是测试新手。我正在尝试使用jest来测试我的App.js文件夹中的两个函数。我正在尝试将测试添加到App.test.js文件夹中。当我运行npm test时，它会找到默认的'renders crashing‘和我的测试。默认测试当然通过了，但是我的测试失败了，jest说ReferenceError: parentFinder is not defined。我导入了App.js文件夹，所以我不确定为什么它是未定义的。它是否应该在App.js文件中找到要测试的函数？
App.js：
import React, { Component } from 'react';
import './App.css';
import Input from './components/PageWrapper/Input';
import Output from './components/PageWrapper/Output';
import PageHeader from './components/PageWrapper/PageHeader';
import ResetInputButton from './components/PageWrapper/ValidateButton';
import ValidateButton from './components/PageWrapper/ValidateButton';
class App extends Component {
constructor(props){
super(props)
this.state = {
inputData: "",
outputData:""
}
}
change = e => {
this.setState({inputData: e.target.value})
// console.log("e.target.value")
}
parentFinder = (data,obj) => {
let z = 0;
while (data[z] != null){
var found = data[z].find((element) => {
if (element.id === obj.parent_id){
return element
}
});
if(found != null){
found.children.push(obj)
}
z += 1;
}
}
validationHandler = e => {
if(this.state.inputData !== "") {
var data = JSON.parse(this.state.inputData)
var i = 0;
while (data[i] != null){
for (var j = 0; j < data[i].length; j++){
if (data[i][j].parent_id != null){
this.parentFinder(data,data[i][j])
}
}
i += 1;
}
this.setState({outputData:JSON.stringify(data[0],null,5)})
} else {
alert("Please enter some data!")
}
}
resetHandler = (e) => {
this.setState({inputData:""})
this.setState({outputData:""})
}
render() {
return (
<div className="wrapper">
<PageHeader />
<Input name="inputData" value={this.state.inputData} onChange={this.change} placeholder={'Paste JSON Here'}/>
<div className="buttonWrapper">
<ValidateButton title={'Validate'} onClick={this.validationHandler}/>
<ResetInputButton title={'Reset Input'} onClick={this.resetHandler}/>
</div>
<Output type="text" value={this.state.outputData}> </Output>
</div>
);
}
}
export default App;这是我的App.test.js：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
test('parentFinder returns null', () => {
expect(parentFinder(0,obj)).toBeNull();
});回答 2
Stack Overflow用户
回答已采纳
发布于 2018-09-11 12:13:17
您还可以使用酶(https://airbnb.io/enzyme)来获取组件的实例。代码将如下所示：
import React from 'react';
import App from './App';
import { shallow } from 'enzyme';
test('parentFinder returns null', () => {
const wrapper = shallow(<App />);
expect(wrapper.instance().parentFinder(0,obj)).toBeNull();
});Stack Overflow用户
发布于 2018-09-11 11:30:31
parentFinder和obj没有在测试文件中的任何地方声明，也没有全局定义，因此您将收到一个“未定义”的错误。
根据你的例子，我假设你指的是：
parentFinder = (data,obj) => { // <---- this?
let z = 0;
...如果是这样的话，obj指的是传递到App.parentFinder方法中的元素(即创建的新div )。由于parentFinder是App组件上的一个方法，因此您需要获取App的一个实例。我推荐使用Test Renderer。
您可以通过执行以下操作来完成此操作：
import React from 'react';
import App from './App';
import TestRenderer from 'react-test-renderer';
test('parentFinder returns null', () => {
// have the TestRenderer create your App
const app = TestRenderer.create(<App />);
// to get the mounted app component instance
const appInstance = app.getInstance();
// not sure what you mean by 0,obj in your example
// but you would pass in your "data"/"obj" values here
const result = appInstance.parentFinder();
});希望这对你有所帮助，如果你有任何问题，请告诉我。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52267930
复制相关文章
相似问题