Reactjs 实例在Jest中装载时为连接的组件返回NULL

Reactjs 实例在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

对于任何不符合行话的术语,我都是比较新的反应和道歉者

我正在尝试测试一个由ref变量组成的连接组件的原型方法,如下所示:

app.js

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()