reactjs - тестирование снимок шутки вложенные перевождите «подключен» компоненты

Question

Когда снимок тестирование (Шутка снимок) компонент, который подключен к Redux магазину я могу экспортировать фактический компонент в дополнении к компоненте связности

// User.js 

/* ... */ 

export class User extends React.Component {/* ... */} 

/* ... */ 

export default connect(mapStateToProps)(User); 

В test file Я могу импортировать фактический компонент (а не подключенную версию) и выполнять на нем моментальные снимки.

// User.spec.js 

import { User } from './User'; 

/* ... toMatchSnapshot() testing */ 

Но я столкнулся с проблемами, когда подключенный компонент вложен внутри другого подключенного компонента. Например, скажем User компонент вложен внутрь другого подключенного компонента -

// Wrapper.js 

import User from './User'; // importing the connected version 

/* ... */ 

export class Wrapper extends React.Component { 

    /* ... */ 

    render() { 
    return (
     <div> 
     /* ... */ 
     <User /> 
     </div> 
    ); 
    } 
} 

export default connect(mapStateToProps)(Wrapper); 

При выполнении теста снимок на Wrapper так же, как я сделал на User дает мне следующую ошибку:

Invariant Violation: Could not find "store" in either the context or props of "Connect(User)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(User)".` 

Есть ли путь к мелкому рендерингу при мгновенной съемке? Или я делаю что-то неправильно?

Answer 1

В этом случае лучший способ испытать Wrapper по себе, просто издевается User

import Wrapper from './Wrapper' 

jest.mock('./User',() => 'User') // note that the path to user is relative the test file not to the Wrapper.js file. 

Это заменит User с помощью простого компонента с именем User.