Passing prop to react component on test - reactjs

Question

Im tryng to test a class component that needs some props to render the html, not sure why is not working. Im starting tests with jest and react now, so im not really experienced. What im missing?
Test component
const mockStore = configureMockStore();
const store = mockStore({});
describe("Pokemon detail", () => {
const mockPokemon = {
sprites: {
back_default:
"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/132.png"
},
name: "ditto",
abilities: [
{
ability: {
name: "imposter",
url: 'https://pokeapi.co/api/v2/ability/150/"'
}
},
{
ability: {
name: "imposter",
url: "https://pokeapi.co/api/v2/ability/150/"
}
}
],
types: [
{
type: {
name: "normal"
}
}
]
}
const wrapper = mount(
<Provider store={store}>
<PokemonDetail pokemon={mockPokemon} />
</Provider>
);
expect(wrapper).toMatchSnapshot();
});
error message is this
TypeError: Cannot read property 'sprites' of undefined
render() {
<h1>oi</h1>
if (this.props.pokemon.sprites) {
^
const habilidades = this.props.pokemon.abilities.map(element => {
return <li key={element.ability.url}>{element.ability.name}</li>;
});
tested component
class PokemonDetail extends React.Component {
render() {
if (this.props.pokemon.sprites) {
const habilidades = this.props.pokemon.abilities.map(element => {
return <li key={element.ability.url}>{element.ability.name}</li>;
});
const tipos = this.props.pokemon.types.map(element => {
return <li key={element.type.url}>{element.type.name}</li>;
});
return (
<div className="ui card">
<div className="image">
<img src={this.props.pokemon.sprites.back_default} />
</div>
<div className="content">
<a className="header">{this.props.pokemon.name}</a>
</div>
<button
onClick={() => this.props.favoritePokemon(this.props.pokemon.name)}
className="ui button primary"
>
Add
</button>
</div>
);
}
return <div />;
}
}
const mapStateToProps = state => {
return { pokemon: state.pokemon };
};
export default connect(mapStateToProps,{favoritePokemon})(PokemonDetail);
Not sure why the mockPokemon with fake data is not taking place on the props object....seems right to me

Answer 1

Since PokemonDetail is a Redux connected component, and pokemon prop is handled by Redux, the prop in <PokemonDetail pokemon={mockPokemon} /> will be overridden by Redux.
Instead, the object should be passed as a part of Redux store:
const store = mockStore({ pokemon: mockPokemon });
const wrapper = mount(
<Provider store={store}>
<PokemonDetail />
</Provider>
);