Почему снимок Jest показывает имя измененного компонента вместо экспортированного имени

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

Поскольку вы ссылаетесь на uglified-версию 'my-custom-module', он попытается выполнить рендеринг для uglified-имен. Тем не менее, я предполагаю, что вам действительно нужно поверхностно визуализировать ваш компонент.

Для этого вы можете использовать поверхностный рендерер библиотек Enzyme .

//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()
});

Это должно показать ваш снимок как Предупреждение, не углубляясь в уровень.