开个玩笑/酶测试等待上下文

Question

我很难进行测试，等待上下文的新状态。这是一个简单的应用程序，它显示加载程序，直到获取用户为止：

（（我知道所有代码都不是使应用程序执行其工作所必需的，但它更多地反映了我在真实项目中的实现方式）

export const Greeting: React.FC<{}> = () => {
  const { loading, user } = useUserContext();

  return (
    <div>
      {loading ? (
        <CircularProgress />
      ) : (
        <h1>
          Hello {user.firstname} {user.lastname}
        </h1>
      )}
    </div>
  );
};

这是测试：

import React from "react";
import Adapter from "enzyme-adapter-react-16";
import Enzyme, { mount } from "enzyme";
import { Greeting } from "./Greeting";
import { UserContextProvider } from "./UserContext";

Enzyme.configure({ adapter: new Adapter() });

describe("Test of <Greeting />", () => {
  it(">>>> should show spinner on loading = true", () => {
    const wrapper = mount(<Greeting />);
    expect(wrapper.find("ForwardRef(CircularProgress)").exists()).toEqual(true);
  });
  it(">>>> should show greeting on loading = false", async () => {
    const wrapper = mount(
      <UserContextProvider>
        <Greeting />
      </UserContextProvider>
    );
    const promise = new Promise(resolve => {
      setTimeout(() => {
        resolve(wrapper);
      }, 5000);
    });
    promise.then((res: Enzyme.ReactWrapper<any>) => {
      console.log(res.debug());
      expect(res.find("h1").text()).toEqual("Hello Bob Testman");
    });
  });
});

链接到代码和框：https://codesandbox.io/embed/modern-sea-tx3ro?fontsize=14&hidenavigation=1&theme=dark

关于如何解决此问题的任何想法？

更新感谢@Noix，它可以完美工作

it(">>>> should show greeting on loading = false", async () => {
const wrapper = mount(
  <UserContextProvider>
    <Greeting />
  </UserContextProvider>
);
const promise = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      wrapper.update();
      resolve(wrapper);
    }, 3000);
  });
};
return promise().then((res: Enzyme.ReactWrapper<any>) => {
  console.log(res.debug());
  expect(res.find("h1").text()).toEqual("Hello Bob Testman");
});

Answer 1

我相信您遇到了麻烦，因为Jest在您的诺言完成之前就结束了测试。尝试在您的“ promise.then”之前添加语句“ return”，以便Jest在结束测试之前能够等待您的诺言结束。

据此：

https://jestjs.io/docs/en/asynchronous.html

Jest不等待回调返回，除非：

选项1：将完成作为参数添加到函数“它”，因此测试仅在调用函数完成时解决（在这种情况下，您需要使用try catch来确保始终调用完成））

选项2：您使用诺言，这是最简单的方法，但永远不要忘记返回诺言：）

选项3：您可以使用语句“ await”来实现诺言，然后必须在“ it”函数上使用关键字async。>

因此，在您的情况下，您可以等待诺言等待其结束，也可以只返回诺言。我希望这会有所帮助。

欢呼：）