React测试覆盖率

Question

我正在尝试获得一些功能组件的测试覆盖率。我在useEffect中有一个setInterval，每隔几秒钟就会更改一条消息。对于我的测试，我似乎没有测试useEffect中的任何内容。我试过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%的覆盖率。