Блог

У меня есть (частный) модуль 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 snapshot компонента выше, я ожидаю, что снимок будет выглядеть как

 <Warning>Lorem ipsum</Warning>
  

но это выглядит так, как:

 <ge>Lorem ipsum</ge>
  

По какой-то причине Jest принимает уменьшенный идентификатор вместо экспортированного имени компонента. Как я могу увидеть название компонента в моментальном снимке Jest? Я не уверен, действительно ли мне нужно настроить конфигурацию моего Webpack или настройки Jest…

Поскольку вы ссылаетесь на уродливую версию ‘my-custom-module’, она попытается выполнить рендеринг с уродливыми именами. Однако я предполагаю, что на самом деле вам нужно неглубоко отобразить ваш компонент.

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

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

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