时间戳

首页 > 解决方案 > 如何在 React 中模拟组件

javascript - 如何在 React 中模拟组件

问题描述

我是 reactJS 的新手。我RegisterForm用Jest.

我是已经测试过的模拟组件（例如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()

    })
});

标签： javascriptreactjsunit-testingmockingjestjs

解决方案

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

import RegisterForm from "...."

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

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

您发布的错误指向您 -or you might have mixed up default and named imports.

推荐阅读