浅功能组件上的酶错误“ShallowWrapper 只能包装有效元素”

Question

（我使用的是 React 16.11.0 和 Enzyme 3.10）

我在

中有一个 React.js 无状态功能组件

Product.js     

import React from 'react';

export const Product = ({productName}) => { 
   return (
      <div>
          <span class='product-name'>{productName}</span>
      <div>
   );

我正在尝试像这样使用 Enzyme Shallow 进行测试 Product.spec.js

import React from 'react';
import { shallow } from 'enzyme';
import { Product } from "./Product.js";

let props;

beforeEach(() => {
    props = {
        productName: "Bicycle"
    };
});

describe('Product', () => {
   it('should have productName', () => {
      const wrapper = shallow(<Product {...props} />);
      expect(wrapper.find('.product-name').length).toEqual(1);
   });
}

但是当测试运行时，酶会抛出这个错误：

TypeError: ShallowWrapper can only wrap valid elements

如果我像这样重写 Product.js，它可以正常工作，所以想知道为什么

function Product(props) { 
   return (
      <div>
          <span class='product-name'>{props.productName}</span>
      <div>
   );
export Product

Answer 1

您应该在测试文件中导入您的组件。

import {Product} from "./Product.js";