使用 fireEvent.mouseOver 或 userEvent.hover 时无法更改我的跨度的可见性

Question

我正在写一个测试来检查我的组件

这里是组件文件：

这里是 styledComponent：

import styled, {
  css,
  FlattenInterpolation,
  FlattenSimpleInterpolation,
  ThemeProps,
} from 'styled-components';
import { PositionsType } from './types';

export const TooltipWrapper = styled.div`
  position: relative;
  display: inline-block;
  margin-top: 10%;
  margin-left: 10%;
  cursor: pointer;
  box-sizing: border-box;

  & > span {
    visibility: hidden;
  }

  &:hover > span {
    visibility: visible;
  }
`;
export type StyledProps = {
  variantPosition: PositionsType;
};
type Variants = {
  [key: string]: FlattenInterpolation<ThemeProps<StyledProps>>;
};
const variants: Variants = {
  left: css`
    transform: translateY(-50%);
    top: 50%;
    right: calc(100% + 15px);
    &:after {
      border-color: transparent transparent transparent #${(props) => props.theme.color.white};
      left: calc(100% + -1.5px);
      top: calc(50% + -0.5rem);
      transform: rotate(-90deg);
    }
  `,
  right: css`
    top: 50%;
    transform: translateY(-50%);
    left: calc(100% + 15px);
    z-index: 10;

    &:after {
      border-color: transparent #${(props) => props.theme.color.white} transparent
        transparent;
      right: calc(100% + -1.5px);
      left: unset;
      top: calc(50% - 0.5rem);
      transform: rotate(90deg);
    }
  `,
  bottom: css`
    top: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%);
    &:after {
      border-color: transparent transparent #${(props) =>
          props.theme.color.white} transparent;
      top: unset;
      width: 1px;
      bottom: 100%;
      left: calc(50% - 0.5rem);
      transform: rotate(180deg);
    }
  `,
  top: css`
    bottom: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%);
  `,
  default: css``,
};

export const TooltipBox = styled.span<StyledProps>`
  position: absolute;
  width: 100%;
  background-color: ${(props) => props.theme.color.white};
  color: ${(props) => props.theme.color.purple};
  text-align: center;
  border-radius: 0.938rem;
  padding: 0.75rem;
  min-width: 6.25rem;
  max-width: 12.5rem;
  font-weight: 600;
  font-size: 0.75rem;
  box-shadow: 0 0.25rem 0.875rem rgba(0, 0, 0, 0.15),
    0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
  /* visibility: hidden; */

  &:after {
    content: '';
    position: absolute;
    width: 0.063rem;
    border-width: 0.5rem;
    border-style: solid;
    border-color: ${(props) => props.theme.color.white} transparent transparent
      transparent;
    left: calc(50% - 0.5rem);
    top: 100%;
  }

  ${({ variantPosition }) => variants[variantPosition]}
`;

最后，我的测试文件：

import * as React from 'react';

import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import { Tooltip } from '.';
import { ThemeProvider } from 'styled-components';
import { theme } from '../../styles/theme';
import userEvent from '@testing-library/user-event';
import { TooltipWrapper } from './tooltip.styled';

describe('<Tooltip />', async () => {
  it('should be visible when hovering the child element', async () => {
    const teste = 'ei';
    const { getByRole, getByTestId, getByText } = render(
      <ThemeProvider theme={theme}>
        <Tooltip text={teste} variantPosition={'top'}>
          Hover me
        </Tooltip>
      </ThemeProvider>,
    );

    userEvent.hover(screen.getByTestId('tooltipWrapper'));
    await waitFor(() => screen.getByTestId('tooltipText'));
    expect(getByTestId('tooltipText')).toHaveStyle('visibility:visible');
  });
});

和错误： \[在此处输入图片描述\]()

当我尝试时：

userEvent.hover(screen.getByTestId('tooltipWrapper'));await waitFor(() => screen.getByTestId('tooltipText'));expect(getByTestId('tooltipText')).toBeInTheDocument);});`

它通过了，但是，如果我错了，请更正，.ToBeInTheDocument 将通过，因为即使我的 被隐藏，它也在文档中。当我悬停它时，我试图让它可见。我认为 fireEvent.mouse(Over, Enter,Up, etc) 在我的代码中不起作用。我真的很感激这里的一些帮助：D

Answer 1

我能够通过将 package.json 中的样式组件依赖项从“^5.3.6”降级到“5.2.0”来解决这个问题。在我删除了 node_modules 之后，再次安装了 yarn。