Question

在另一个文件中，我是这样导入的，但是在测试中使用时，我出现错误React.createElement：类型无效-预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义文件中导出组件，或者可能混淆了默认导入和命名导入。可以是什么？

import  { RateComponent,  mapStateToProps }   from '../components/Rate';
 it ('renders correctly if has data', () => {
    const tree = shallow( <RateComponent dispatch={jest.fn()}/>);
    expect(tree).toMatchSnapshot();
  });

这就是我的导出方式。

export 
{
  RateComponent,
  mapStateToProps
}
export default connect(mapStateToProps)(RateComponent);

Answer 1

尝试导入默认导出，看看是否可行

import RateComponent from '../components/Rate';

您也无需导出mapStateToProps。

Answer 2

正如Clarity所指出的，仅从文件中导入RateComponent。并通过 RateComponent的一些道具，用于使组件浅化并进行匹配的测试快照

it ('renders correctly if has data', () => {
  const props = {
    // ...Define your props here with some values
  };
  const tree = shallow( <RateComponent {...props}/>);
  expect(tree).toMatchSnapshot();
});

ES6导入和导出模块

2 个答案: