ReactShallowRenderer render()：浅渲染仅适用于自定义组件，但提供的元素类型为“object”。错误

Question

我收到以下错误

ReactShallowRenderer render(): Shallow rendering works only with custom components, but the provided element type was object.

我在尝试模拟某些模块时遇到此错误我的 Main.test.js 文件

import React from 'react';
import { shallow } from 'enzyme';

 
jest.mock('../Elements', () =>
  jest.fn().mockReturnValue({
    SortIndicator: (props) => <div {...props}></div>,
    ExchangeRate: (props) => <div {...props}></div>,
  })
);

jest.mock('../../components/Default_Import', (props) => (
  <div {...props}></div>
));

it('IT246 SearchListView is rendering without any error', async () => {
    const MainContainer = await import('./MainContainer');

const wrapper = shallow(<MainContainer />)

})

我的Main.js文件

import { SortIndicator, ExchangeRate } from '../Elements';

export default class SearchListView extends React.Component {
  render() {

  return (

    <>
      <SortIndicator></SortIndicator>
      <ExchangeRate></ExchangeRate>
    </>

  )

  }
}

Answer 1

来自文档 Importing defaults

When importing a default export with dynamic imports, it works a bit differently. You need to destructure and rename the "default" key from the returned object.

因此，您需要像这样动态导入 ./MainContainer 模块：

describe('68279075', () => {
  it('should pass', async () => {
    const MainContainer = (await import('./main')).default;
    const wrapper = shallow(<MainContainer />);
    console.log(wrapper.debug());
  });
});

一个完整的工作示例：

Main.jsx:

import React from 'react';
import { SortIndicator, ExchangeRate } from './Elements';

export default class SearchListView extends React.Component {
  render() {
    return (
      <>
        <SortIndicator></SortIndicator>
        <ExchangeRate></ExchangeRate>
      </>
    );
  }
}

Elements.jsx:

import React from 'react';

export function ExchangeRate() {
  return <div>ExchangeRate</div>;
}

export function SortIndicator() {
  return <div>SortIndicator</div>;
}

Main.test.jsx:

import React from 'react';
import { mount } from 'enzyme';

jest.mock('./Elements', () => ({
  SortIndicator: (props) => <div {...props}>mocked SortIndicator</div>,
  ExchangeRate: (props) => <div {...props}>mocked ExchangeRate</div>,
}));

describe('68279075', () => {
  it('should pass', async () => {
    const MainContainer = (await import('./main')).default;
    const wrapper = mount(<MainContainer />);
    console.log(wrapper.debug());
  });
});

调试消息：

 PASS  examples/68279075/Main.test.jsx (12.861 s)
  68279075
    ✓ should pass (49 ms)

  console.log
    <SearchListView>
      <SortIndicator>
        <div>
          mocked SortIndicator
        </div>
      </SortIndicator>
      <ExchangeRate>
        <div>
          mocked ExchangeRate
        </div>
      </ExchangeRate>
    </SearchListView>

      at examples/68279075/Main.test.jsx:13:13

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        14.51 s

ReactShallowRenderer render()：浅渲染仅适用于自定义组件，但提供的元素类型为“object”。错误

ReactShallowRenderer render(): Shallow rendering works only with custom components, but the provided element type was `object`. Error

javascript

reactjs

jestjs

enzyme