Question

我想在Form组件上进行单元测试。 user是与所有子组件共享的上下文数据。

 const { user } = useContext(UserContextAPI);
 return (
  <> {!user ? (
        <>
          {navigation.push({
            pathname: "./Login",
            state: { editProduct: "edit" },
          })}
        </>
      ) : (
        <Form>.....</From>
      )
  }
 </>
);

我已经编写了一个简单的测试用例来测试表单组件

 it("should contain From component", () => {
   let wrapper = mount(
      <BrowserRouter>
        <EditProduct.WrappedComponent />
      </BrowserRouter>
    );
    expect(wrapper.find("Form").exist()).toEqual(true);
  });

但是测试用例失败了，我认为基于条件渲染它不会去测试Form组件。我们如何根据上下文数据进行条件渲染？

Answer 1

尝试在顶级添加上下文提供程序：

it("should contain From component", () => {
    const UserContextAPI = React.createContext({});

    let wrapper = mount(
        <UserContextAPI.Provider value="{}">
            <BrowserRouter>
                <EditProduct.WrappedComponent />
            </BrowserRouter>
        </UserContextAPI.Provider>
    );
    expect(wrapper.find("Form").exist()).toEqual(true);
});

Answer 2

我这样做了，而且奏效了。 @Ken Bekov致谢您

Student convertStringToStudent(String input) {
    Student s = new Student();
    // set the properties of student s by parsing input here
    return s;
}

使用Jest和Enzyme测试基于ContextAPI数据的组件的条件渲染

2 个答案: