如何測試反應組件使用jest呈現列表

Question

我試圖理解單元測試是如何工作的，並構建了一個小的React應用程序，它可以呈現出一個Pokemon列表。 我要做的是編寫一個單元測試，檢查列表是否正確呈現。 但是，生成的快照顯示它只呈現'loading ...'文本，這是在等待API響應時應該執行的操作。 我究竟做錯了什么？

PokemonList.test.js

import React from 'react';
import PokemonList from '../components/PokemonList';
import renderer from 'react-test-renderer';

describe('PokemonList component renders a list of Pokemon', () => {
    it('renders correctly', () => {
        const fetched = true;
        const loading = true;
        const species = [{
            "0": {"name": "bulbasaur"},
            "1": {"name": "ivysaur"},
            "2": {"name": "venusaur"}
        }];
        const rendered = renderer.create(
            <PokemonList fetched={fetched} loading={loading} species={species} />
        );
        expect(rendered.toJSON()).toMatchSnapshot();
    });
});

PokemonList.js

// The PokemonList component show nothing when it mounts for the first time.
// But right before it mounts to the DOM, it makes an API call to fetch the
// first 151 Pokemon for the API and then displays them using the Pokemon component.

import React from 'react';
import Pokemon from './Pokemon';

class PokemonList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            species: [],
            fetched: false,
            loading: false,
        };
    }

    componentWillMount() {
        this.setState({
            loading: true
        });
        fetch('http://pokeapi.co/api/v2/pokemon?limit=151').then(res=>res.json())
        .then(response=>{
            this.setState({
                species: response.results,
                loading: true,
                fetched: true
            });
        });
    }

    render() {
        const {fetched, loading, species} = this.state;
        let content ;
        if (fetched) {
            content = <div className="pokemon--species--list">{species.map((pokemon, index) => <Pokemon key={pokemon.name} id={index+1} pokemon={pokemon} />)}</div>
        } else if (loading && !fetched) {
            content = <p className="loading"> Loading ...</p>
        } else {
            content = <div/>
        }
        return (
            <div>
                {content}
            </div>
        )
    }
}

export default PokemonList;

PokemonList.test.js.snap

exports[`PokemonList component renders a list of Pokemon renders correctly 1`] = `
<div>
  <p
    className="loading">
     Loading ...
  </p>
</div>
`;

Answer 1

您正試圖通過道具改變PokemonList組件中的狀態，但PokemonList不會對道具做任何事情，因此狀態不會改變。 設置狀態和測試PokemonList組件的一種方式（在我看來最簡單）是使用Enzyme和酶 -json。 這是一個例子：

import React from 'react';
import PokemonList from '../components/PokemonList';
// Importing shallow and toJson.
import {shallow} from "enzyme";
import toJson from "enzyme-to-json";

describe('PokemonList component renders a list of Pokemon', () => {
  it('renders correctly', () => {
    const wrapper = shallow(<PokemonList/>);
    const fetched = true;
    // You can omit setting the loading to true, because componentWillMount in PokemonList component takes care of that.
    //const loading = true;

    // I've changed your species array, that way it should work as expected.
    const species = [
      {name: "bulbasaur"},
      {name: "ivysaur"},
      {name: "venusaur"}
    ];

    wrapper.setState({
      fetched,
      species
    });

    expect(toJson(wrapper)).toMatchSnapshot();
  });
});

另外我建議在fetch中使用https。