Javascript 不确定如何为条件呈现的ReactJS组件编写测试用例

我的应用程序最初在组件中使用加载占位符进行渲染，5秒钟后渲染不同的元素。我想用jest和酶来测试这个成分

我的问题是，当我测试它和console.log（wrapper.debug（））时，它只显示加载部分

现在我的问题是如何对条件部分进行单元测试

我的App.js

import React,{useState, useEffect} from 'react';
import logo from './logo.svg';
import './App.css';

const App = () => {
  const [loading, setLoading] = useState(true);
  useEffect(()=>{
    setTimeout(() => {
      setLoading(false)
    }, 5000);
  },[])
  if(loading){
    return <span>loading....</span>
  }
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

我的App.test.js

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

describe("app component", () => {
  it("loading state", () => {
    const setState = jest.fn();
    const useStateMock = (initState) => [initState, setState];
    jest.spyOn(React, "useState").mockImplementation(useStateMock);
    jest.spyOn(React, "useEffect").mockImplementation(setState);
    const wrapper = shallow(<App />);
    const result = wrapper.find("#abc");
    result.simulate("click");
    wrapper.update();
    console.log(wrapper.debug());
    expect(setState).toHaveBeenCalledWith(false);
  });
});

从“React”导入React；
从“/App”导入应用程序；
从“酶”中导入{shall}；
描述（“应用程序组件”，（）=>{
它（“加载状态”，（）=>{
const setState=jest.fn（）；
const useStateMock=（initState）=>[initState，setState]；
jest.spyOn（React，“useState”）.mock实现（useStateMock）；
jest.spyOn（React，“useffect”）.mock实现（setState）；
常量包装器=浅（）；
const result=wrapper.find（#abc”）；
结果。模拟（“点击”）；
wrapper.update（）；
log（wrapper.debug（））；
期望（设置状态）。已被调用（false）；
});
});

您可以尝试使用：

jest.setTimeout（6000）

从“React”导入React；
从“/App”导入应用程序；
从“酶”中导入{shall}；
描述（“应用程序组件”，（）=>{
它（“加载状态”，（）=>{
const setState=jest.fn（）；
const useStateMock=（initState）=>[initState，setState]；
jest.spyOn（React，“useState”）.mock实现（useStateMock）；
jest.spyOn（React，“useffect”）.mock实现（setState）；
常量包装器=浅（）；
const result=wrapper.find（#abc”）；
结果。模拟（“点击”）；
wrapper.update（）；
jest.setTimeout（6000）
log（wrapper.debug（））；
期望（设置状态）。已被调用（false）；
})

老实说，我不会在您的组件中放置计时器来显示加载文本。相反，您通常会有一个全局机制来检查页面或api调用是否已完成，并将该标志存储在数据存储中。如果您必须按自己的方式来做，（这并不理想）然后我将提取作为一个单独的组件，并自行测试。您没有正确的组件代码来模拟react钩子，但是您的

useState

mock也不会更新它返回给被测组件的值，因此可以执行单独的条件。您考虑过react测试库吗？它是一个测试UI比测试酶容易（IMHO）。

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

describe("app component", () => {
  it("loading state", () => {
    const setState = jest.fn();
    const useStateMock = (initState) => [initState, setState];
    jest.spyOn(React, "useState").mockImplementation(useStateMock);
    jest.spyOn(React, "useEffect").mockImplementation(setState);
    const wrapper = shallow(<App />);
    const result = wrapper.find("#abc");
    result.simulate("click");
    wrapper.update();
    jest.setTimeout(6000)
    console.log(wrapper.debug());
    expect(setState).toHaveBeenCalledWith(false);
  })