1

（我正在使用 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>
   );

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

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
4

1 回答 1

1

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

import {Product} from "./Product.js";
于 2019-11-14T14:23:06.750 回答