0

这是一个 Toast 组件，当单击按钮时显示并在 x 秒后消失。测试waitFor用于将showToast状态更改为trueAPI 调用成功时，然后waitForElementToBeRemoved用于检查 toast 组件是否已从屏幕上移除。

测试正在通过，所以假设showToast是false. 但是当我检查开玩笑的报道时，那条线hide={() => setShowToast(false)}仍然显示为未覆盖。

使用 覆盖该行需要什么testing-library？

吐司成分：

const Toast = props => {
  const { message, color, iconName, show, hide, background, timeoutDuration, ...rest } = props;

  useEffect(() => {
    if (show) {
      const timeout = setTimeout(() => {
        hide();
      }, timeoutDuration * 1000 + 1000);
      return () => clearTimeout(timeout);
    }
  }, [show, timeoutDuration]);

  return (
    <Box>
      <Container {...rest} show={show} timeoutDuration={timeoutDuration}>
        <StyledToast py={1} px={2} background={background} bgColor={colors[color]} role="alert">
          <StyledIcon name={iconName} color={color} />
          <StyledP color={color} fontSize={[14, 16]}>
            {message}
          </StyledP>
        </StyledToast>
      </Container>
    </Box>
  );
};

使用 Toast 的组件：

const [showToast, setShowToast] = useState(false);

{showToast && (
        <Toast
          message="Store Settings successfully updated!"
          color="green"
          iconName="check-circle"
          background={true}
          show={showToast}
          timeoutDuration={10}
          zIndex={10}
          hide={() => setShowToast(false)}
        />
      )}

测试：

import '@testing-library/jest-dom';
import { render, screen, fireEvent, waitFor, waitForElementToBeRemoved } from '@testing-library/preact';
    
test('Clicking OK displays Toast and it disappears', async () => {
        global.fetch = jest.fn(() =>
          Promise.resolve({
            json: () => Promise.resolve({ data: {}] } })
          })
        );
    
        const CheckBox = screen.getByTestId('some-id');
        fireEvent.click(CheckBox);
        const SaveButton = screen.getByText('Save');
        fireEvent.click(SaveButton);
        expect(screen.getByText('OK')).toBeTruthy();
        const OKButton = screen.getByText('OK');
        fireEvent.click(OKButton);
    
        await waitFor(() => {
          expect(screen.getByText('Store Settings successfully updated!')).toBeInTheDocument();
        }, { timeout: 11000 });
    
        waitForElementToBeRemoved(screen.getByText('Store Settings successfully updated!')).then(() =>
          expect(screen.queryByText('Store Settings successfully updated!')).not.toBeInTheDocument()
        );
        
      });
4

0 回答 0