У меня есть много тестов снимков, которые выглядят следующим образом:
it('Mapping renders correctly with AssetIcon', () => {
const div = document.createElement('div')
document.body.appendChild(div)
// Using enzyme's 'mount' to solve issues with Leaflet requiring access to the DOM and other features not
// provided by react.render.
const tree = mount(<Mapping
tileDiameterMins = {5}
bounds = {bounds}
tileLayer = {LocalTileLayer}
forces = {[{}]}
platforms = {[{}]}
playerForce = 'blue'
phase = {Phase.Planning}
><AssetIcon id='id1' name="Jeffrey" position={L.latLng(13.298034302, 43.0488191271)}
selected={false} type='agi' force='blue'
tooltip='Tooltip for marker'/></Mapping>, { attachTo: div })
expect(tree).toMatchSnapshot()
})
Однако единственная часть, которая меня волнует в каждом тесте, - это дочерний компонент (в данном случае AssetIcon
), к сожалению, хотя мы используем Leaflet для рендеринга компонента Mapping
, а AssetIcon
должен быть отрисован внутри компонента Mapping
, чтобы он работал. Но есть ли способ поиздеваться над этим компонентом? Так что я мог бы просто сделать что-то вроде:
it('Mapping renders correctly with AssetIcon', () => {
const div = document.createElement('div')
document.body.appendChild(div)
// Using enzyme's 'mount' to solve issues with Leaflet requiring access to the DOM and other features not
// provided by react.render.
const tree = mount(<MockedMap><AssetIcon id='id1' name="Jeffrey" position={L.latLng(13.298034302, 43.0488191271)}
selected={false} type='agi' force='blue'
tooltip='Tooltip for marker'/></MockedMap>, { attachTo: div })
expect(tree).toMatchSnapshot()
})
Таким образом, по крайней мере, мне не нужно заботиться обо всех пропсах, которые я передаю каждый раз, когда я хочу протестировать подкомпонент Mapping
.