小编ASG*_*ASG的帖子

我对测试 React 组件相当陌生，并且正在努力测试使用 React.createRef 创建的引用。我已经阅读了这个很好的回复，但不确定它是否解决了我的问题。在 ref 回调之前调用 componentDidMount

constructor(props) {
    super(props);
    this.myRef = React.createRef();
    console.log('this.myRef in constructor', this.myRef);
}

此控制台日志返回 null，这是预期的，因为组件尚未呈现。

componentDidMount() {
    console.log('this.myRef in component did mount', this.myRef);
  }

    return (
      <div className="tab_bar">
        <ul ref={this.myRef} className="tab__list direction--row" role="tablist">
          { childrenWithProps }
        </ul>
      </div>

控制台日志返回ulcomponentDidMount中的html元素。这也是预期的，因为组件已经渲染。

然而，

当我测试这个组件时：

const children = <div> child </div>;

describe('Tab component', () => {
  it('should render', () => {
    const wrapper = mount(<Tab>{children}</Tab>);
    const ulElement = wrapper.find('ul');
    const instance = ulElement.instance().ref;
    console.log('instance', instance); …

我正在创建一个跳过链接，但锚标记没有在 Safari 中获得焦点（在 Chrome 中有效）。正如我在其他帖子中所读到的那样，我已启用所有辅助功能设置：

1. Safari --> 首选项 --> 高级 --> 选中“按 Tab 键突出显示网页上的每个项目”框
2. Mac 系统偏好设置 --> 键盘 --> 快捷方式 --> 然后点击底部的“所有控件”

除了此处建议的 :focus 之外，我还尝试添加 :hover 伪类：Accessibility Skip Nav - Skip to Content (Issue in Safari)

即使进行了这些更改，浏览内容也不会使跳过链接出现在 Safari 中。它在 Chrome 中始终如一地工作。这里还有一个有问题的代码笔：https ://codepen.io/a-gheorghe-the-vuer/pen/vVJmZw

.card {
  background-color: yellow;
  left: -1000px;
  top: -1000px;
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  border: .1rem solid red;
  border-radius: .4rem;
  box-shadow: 0 .2rem 1rem 0 black;
  padding: 3.6rem;
}

.anchor-skip:focus .card {
  left: 0; …