javascript - React 中如何模拟组件

Question

我是reactJS新手。我使用 Jest 测试我的组件 RegisterForm。

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

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()

    })
});

Answer 1

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

import RegisterForm from "...."

如果您在 RegisterForm 周围有一些 HOC 并且您实际上正在尝试使用命名导出，那么您必须导出组件以及默认导出(可能看起来像这样)

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

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