Reactjs 实例在Jest中装载时为连接的组件返回NULL
对于任何不符合行话的术语,我都是比较新的反应和道歉者 我正在尝试测试一个由ref变量组成的连接组件的原型方法,如下所示: app.jsReactjs 实例在Jest中装载时为连接的组件返回NULL,reactjs,react-redux,jestjs,enzyme,ref,Reactjs,React Redux,Jestjs,Enzyme,Ref,对于任何不符合行话的术语,我都是比较新的反应和道歉者 我正在尝试测试一个由ref变量组成的连接组件的原型方法,如下所示: app.js export class Dashboard extends React.Component { // Exporting here as well constructor(props) { this.uploadFile = React.createRef(); this.uploadJSON = this.uploadJSON.bind
export class Dashboard extends React.Component { // Exporting here as well
constructor(props) {
this.uploadFile = React.createRef();
this.uploadJSON = this.uploadJSON.bind(this);
}
uploadJSON () {
//Function that I am trying to test
//Conditions based on this.uploadFile
}
render() {
return (
<div className="dashboard wrapper m-padding">
<div className="dashboard-header clearfix">
<input
type="file"
ref={this.uploadFile}
webkitdirectory="true"
mozdirectory="true"
hidden
onChange={this.uploadJSON}
onClick={this.someOtherFn}
/>
</div>
<SensorStatList />
<GraphList />
</div>
);
}
const mapStateToProps = state => ({
//state
});
const mapDispatchToProps = dispatch => ({
//actions
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(Dashboard);
}
import { Dashboard } from '../Dashboard';
import { Provider } from 'react-redux';
import configureStore from '../../../store/store';
const store = configureStore();
export const CustomProvider = ({ children }) => {
return (
<Provider store={store}>
{children}
</Provider>
);
};
describe("Dashboard", () => {
let uploadJSONSpy = null;
function mountSetup () {
const wrapper = mount(
<CustomProvider>
<Dashboard />
</CustomProvider>
);
return {
wrapper
};
}
it("should read the file", () => {
const { wrapper } = mountSetup();
let DashboardWrapper = wrapper;
let instance = DashboardWrapper.instance();
console.log(instance.ref('uploadFile')) // TypeError: Cannot read property 'ref' of null
})
有人能帮我理解为什么这个错误吗
console.log(instance.ref('uploadFile'))
//TypeError:无法读取null的属性“ref”
突然出现?另外,这种方法是否可行?如果没有,更好的选择是什么?
包装器是没有实例的CustomProvider
,并且ref
应该与不推荐使用的字符串ref一起使用
如果应在仪表板上访问ref,则可以:
wrapper.find(Dashboard).first().instance().uploadFile.current
wrapper.find('input').first()
如果需要访问输入包装器,它可以是:
wrapper.find(Dashboard).first().instance().uploadFile.current
wrapper.find('input').first()