为什么 Jest 快照显示 uglified 组件名称而不是导出名称

Question

我有一个（私有）npm 模块，可以导出多个 React 组件。该模块由 Webpack 捆绑，在生成的捆绑包中，对其中一个组件的引用（例如 Warning）如下所示：

t.d(n,"Warning",function(){return ge})

然后我有一个导入这个模块的 React 项目：

import { Warning } from 'my-custom-module';

...

render() {
    return (
        <Warning>Lorem ipsum</Warning>
   );
}

这一切正常，但是当我创建上面组件的 Jest 快照时，我希望快照看起来像

<Warning>Lorem ipsum</Warning>

但它看起来像：

<ge>Lorem ipsum</ge>

出于某种原因，Jest 采用缩小的标识符而不是组件的导出名称。如何在 Jest 快照中查看组件名称？我不确定是否需要调整我的 Webpack 配置或 Jest 设置...

Answer 1

由于您指的是 'my-custom-module' 的丑化版本，它会尝试呈现丑化的名称。但是，我假设您实际上需要的是浅层渲染组件。

您可以为此使用Enzyme libraries's shallow renderer 。

//MyAwesomeComponent.js
import { Warning } from 'my-custom-module';
export default class MyAwesomeComponent extends Component{


    render(){
        return (<Warning>Lorem ipsum</Warning>);
    }
}


//MyAwesomeComponent.test.js
import { shallow } from 'enzyme';
import MyAwesomeComponent from './MyAwesomeComponent';

it('renders <MyAwesomeComponent />', () => {
    const shallowMyComponent = shallow(<MyComponent />);
    expect(shallowMyComponent).toMatchSnapshot()
});

这应该将您的快照显示为警告而不深入。