Передача опоры для реагирования компонента на тест - PullRequest
Новая
       13

Передача опоры для реагирования компонента на тест

0 голосов
/ 06 февраля 2019

Я пытаюсь протестировать компонент класса, который нуждается в некоторых реквизитах для рендеринга HTML, не уверен, почему он не работает.Я начинаю тесты с шуткой и реагирую сейчас, так что я не очень опытный.Чего мне не хватает?

Тестовый компонент 

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

Сообщение об ошибке это 

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

проверенный компонент 

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

Не уверен, почему mockPokemonс поддельными данными не происходит на объекте подпорки .... кажется правильным для меня

1 Ответ

0 голосов
/ 06 февраля 2019

Поскольку PokemonDetail является подключенным компонентом Redux, а pokemon prop обрабатывается Redux, реквизит в <PokemonDetail pokemon={mockPokemon} /> будет переопределен Redux.

Вместо этого объект должен быть передан какчасть магазина Redux: 

  const store = mockStore({ pokemon: mockPokemon });

  const wrapper = mount(
    <Provider store={store}>
      <PokemonDetail />
    </Provider>
  );
...