Javascript 如何在React中模拟组件

我是新来的。我开玩笑地测试我的组件注册表

我是已经测试过的模拟组件，例如PasswordField。因此，我模拟了它，但出现了一个错误：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Field`.

   9 | describe('HeaderContainer', () => {
  10 |     it('render correctly', ()=>{
> 11 |         const tree = renderer.create(
     |                               ^
  12 |            <RegisterForm />
  13 |         ).toJSON();
  14 |         expect(tree).toMatchSnapshot()

你知道我怎样才能解决这个问题吗

这是我的测试：

import renderer from "react-test-renderer";
import React from "react";
import {RegisterForm} from "../../../../components/form";
import {PasswordField} from "../../../../components/textFields";


jest.mock('../../../../components/textFields', () => ('PasswordField'));

describe('HeaderContainer', () => {
    it('render correctly', ()=>{
        const tree = renderer.create(
           <RegisterForm />
        ).toJSON();
        expect(tree).toMatchSnapshot()

    })
});

---

您在测试中使用的是命名导入，而不是默认导入。你可能需要

import RegisterForm from "...."

如果您在RegisterForm周围有一些HOC，并且您实际上正在尝试使用命名的导出，那么您必须导出组件，而默认的导出可能类似于

export const RegisterForm = (props) => {}; //named export
export default RegisterForm; //default export

---

您发布的错误指向了这一点-或者您可能混淆了默认导入和命名导入。

您能告诉我们字段组件是什么吗？字段组件属于Formik组件this.\u validateFirstNamevalue}>{{meta}=>