React Jest setInterval тестовое покрытие

Question

Я пытаюсь получить тестовое покрытие функционального компонента. У меня есть в использовании влияние setInterval, чтобы изменить сообщение каждые несколько секунд. Для моего теста Кажется, что я не тестирую то, что используется. Я пробовал jest.useFakeTimers();

Также я устанавливаю useState.

компонент:

import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import styled from "styled-components";
// Array of strings
import { messages } from "./messages";

export const Wrapper = styled.div`
  font-family: 'Lato', sans-serif !important;
  box-sizing: border-box;
  width: 100%;
  display: block;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  height: 100vh;
  h1 {
    font-size: 2rem;
    color: rgb(100, 100, 100);
  }
};
`;

const loadMessage = () => {
  // this is the line that is not being tested.
  return messages[Math.floor(Math.random() * messages.length)];
};

export const Loader = () => {
  const [message, setMessage] = useState("Loading...");

  useEffect(() => {
    const id = setInterval(() => {
      // this is the line that is not being tested.
      setMessage(loadMessage());
    }, 3000);
    return () => clearInterval(id);
  }, [message]);

  return (
    <Wrapper id="login-content">
      <Row className="align-items-center h-100">
        <Col className="col-md-12 mx-auto">
          <div className="container text-center">
            <h1 className="loader" data-testid="loader" aria-live="polite">
              {message}
            </h1>
          </div>
        </Col>
      </Row>
    </Wrapper>
  );
};

тест:

import React from "react";
import { shallow } from "enzyme";
import { Loader } from "./Loader";

const doAsync = c => {
  setTimeout(() => {
    c(true);
  }, 3000);
};

jest.useFakeTimers();

describe("Loader component", () => {
  it("tests state", () => {
    const wrapper = shallow(<Loader />);
    const message = wrapper.find(".loader").text();

    jest.advanceTimersByTime(3000);

    const callback1 = () => {
      expect(wrapper.find(".loader").text()).not.toMatch(message);
    };

    doAsync(callback1);

    jest.useRealTimers();
  });
});

Answer 1

Я столкнулся с проблемами в ферментах: https://github.com/airbnb/enzyme/issues/2086

Функция useEffect не выполняется, когда компонент отображается с мелким.

учитывая то, что я должен был сделать, это использовать UseEffect.

const doAsync = c => {
  setTimeout(() => {
    c(true);
  }, 3000);
};

jest.useFakeTimers();

describe("Loader component", () => {
  beforeEach(() => {
    const useEffect = jest
      .spyOn(React, "useEffect")
      .mockImplementation(f => f());
  });

  it("tests state", done => {
    const wrapper = shallow(<Loader />);
    const message = wrapper.find(".loader").text();

    jest.advanceTimersByTime(3000);

    const callback1 = () => {
      expect(wrapper.find(".loader").text()).not.toMatch(message);
    };

    doAsync(callback1);

    jest.useRealTimers();
    done();
  });
});

это делает мой тестовый заезд, и я получаю 100% покрытие.