Question

遇到此错误

不变违反：元素类型无效：预期为字符串（对于内置组件）或类/函数（用于复合组件）但得到：未定义。您可能忘记了从中导出组件定义的文件，或者您可能混淆了默认文件并命名为进口。

创建完图标jest.mock后，将svg详细信息隐藏在快照中。我检查了一下，我的进口货还可以。之前，其他组件也使用相同的技术。

我正在使用React 16.7和Jest 24.9.0

我的组件

import { Icons, ToolTip } from '@dev/react';
import React from 'react';

class Header extends React.Component {
  //some code
  render() {
    let {
      isWarning,
      isExpanded,
      name,
      status,
    } = this.props;

    return (
      <div className={styles.title}>
      {isWarning && status !== 'pending' && status !== 'error' && (
        <ToolTip
          arrowEdge="top"
          content={"some contrnt"}
        >
        <Icons.ExclamationTriangle className={styles.icon} />
        </ToolTip>
      )}
      </div>
    );
  }
  //some code
}

export default Header;

测试

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

import renderer from 'react-test-renderer';
import Header from './Header.jsx';

jest.mock('@dev/react', () => ({
  Icons: {
    ExclamationTriangle: 'ReactIcons.ExclamationTriangle',
  }
}));

describe('Warning tooltip', () => {
  let renderSnapshot = renderer.create(elem.getElement()).toJSON();

  it('matches the saved snapshot with warning tooltip', () => {
    const subject = renderComponent({
      isWarning: true,
    });

    expect(renderSnapshot(subject)).toMatchSnapshot();
  });
});

const renderComponent = (props) =>
  shallow(
    <Header
      isExpanded={false}
      name="Some Heading"
      {...props}
    />
  );

添加jest.mock时始终不变

0 个答案: