传递道具以在测试中反应组件

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>
  );