为什么我的React组件's ref在测试中等于undefined ?

Why is my React component's refs equal to undefined within a test?

本文关键字：测试 undefined ref React 我的 组件 为什么      更新时间：2023-09-26

在测试期间如何从组件内部访问refs ?我尝试过使用TestUtils.renderIntoDocument (a la http://myshareoftech.com/2013/12/unit-testing-react-dot-js-with-jasmine-and-karma.html)和TestUtils.createRenderer().render()，但在这两种情况下，我的组件的refs似乎是未定义的(在PhantomJS和Chrome中运行Jasmine/Karma)。我是不是漏掉了什么?

我的假设是，这可能是由于0.14的变化与拆分ReactDOM，但我没有办法验证。

下面是我的代码:

import React from 'react'; // v0.14
import TestUtils from 'react/lib/ReactTestUtils';
import SeatList from '../../client/seat-list';
describe('SeatList', () => {
  // using ReactShallowRenderer
  var renderer = TestUtils.createRenderer();
  function getRenderedResult(props = {}) {
    renderer.render(<SeatList playerColor={props.playerColor || null}
                white={props.white || undefined}
                black={props.black || undefined}
                sitOrStandAs={props.sitOrStandAs || null} />);
    return renderer.getRenderOutput();
  }
  it('allows a user to sit in an open seat', () => {
    let sitOrStandAs = jasmine.createSpy('sitOrStandAs');
    let result = getRenderedResult({sitOrStandAs: sitOrStandAs});
    console.log(result.refs); // result.refs is undefined :(
    // using TestUtils.renderIntoDocument
    let seatList = <SeatList playerColor={null} white={undefined} black={undefined} sitOrStandAs={sitOrStandAs} />;
    TestUtils.renderIntoDocument(seatList);
    let btn = seatList.refs.white; // throws Exception: seatList.refs is undefined :(
    TestUtils.Simulate.click(btn);
    expect(sitOrStandAs).toHaveBeenCalled();
  });
});

任何建议都很好。谢谢!

我误以为renderIntoDocument没有返回任何有用的东西。正确的解决方案是将seatList赋值给TestUtils.renderIntoDocument的返回值:

let seatList = TestUtils.renderIntoDocument(seatList);

接下来，测试通过了，我现在感觉更快乐了。

相关文章：