mardi 18 février 2020

How can I mock multiple fetch calls in react testing

I have a CrudTable component that loads categories and products, and pass these data to another TableComponent in its render method.

I want to test that CrudTable is rendering appropriately with the content loaded from the api call.

CrudTable:

class CrudTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoadedProducts: false,
      isLoadedCategorys: false,
      categories: [],
      products: [],
      sort_field: 'number_of_views',
      sort_order: 'asc'
    };
  }

  async fetchProducts(sort_fieldP, sort_orderP) {
    let sort_field = sort_fieldP || this.state.sort_field;
    let sort_order = sort_orderP || this.state.sort_order;
    const products = await ProductsService.getAll(sort_field, sort_order);
    return products;
  }

  async fetchCategories() {
    try {
      const categories = await CategoriesService.getAll();
      return categories;
    } catch (err) {
      console.log(err);
    }
  }

  async componentDidMount() {
    try {
      const products = await this.fetchProducts();
      const categories = await this.fetchCategories();

      this.setState({
        categories: categories,
        products: products,

        isLoadedCategorys: true,
        isLoadedProducts: true
      });
    } catch (err) {
      console.log(err);
    }
  }

  render() {
    try {
      const { error, isLoadedCategorys, isLoadedProducts } = this.state;
      if (error) {
        return <div>Error: {error.message}</div>;
      } else if (!isLoadedCategorys || !isLoadedProducts) {
        return 'Loading...';
      } else {
        return (
          <TableComponent
            onEdit={this.handleEdit}
            onDelete={this.handleDelete}
            onSort={this.handleSort}
            onIncrementNumber={this.handleIncrementNumber}
            data={this.state}
          />
        );
      }
    } catch (error) {
      console.log(error);
      return 'No data';
    }
  }
}

Here my unit test:

it("renderiza productos", async () => {
        jest.mock("../servicios/ProductsService");
        // Necesito categorias y productos
        const fakeState = {
            categories: [
                {
                    id: 1,
                    name: "Trailer TV",
                    hasLength: true
                },
                {
                    id: 4,
                    name: "Trailer Movie ter",
                    hasLength: true
                }
            ],
            products: [
                {
                    id: 5,
                    category_id: "2",
                    name: "New",
                    type: "Audio",
                    release_date: "2020-02-10",
                    insert_date: "2020-02-10",
                    number_of_views: 16,
                    abbreviation: "NEW",
                    length: "300"
                },
                {
                    id: 6,
                    category_id: "3",
                    name: "Outdoors product",
                    type: "outout",
                    release_date: "2020-02-08",
                    insert_date: "2020-02-10",
                    number_of_views: 21,
                    abbreviation: "OUT"
                }
            ]
        };

        jest.spyOn(global, "fetch").mockImplementation(() => {
            console.log('mock fe products');
            return Promise.resolve({
                json: () => Promise.resolve(fakeState.products)
            })
        });

        jest.spyOn(global, "fetch").mockImplementation(() => {
            console.log('mock fe categories');
            return Promise.resolve({
                json: () => Promise.resolve(fakeState.categories)
            })
        });

        await act(async () => {
            render(
                <CrudTable />
                , container);
        });

        let data = "CategoryNameAbbrTypeLengthR.Date descI.DateViews descOperations";
        expect(container.querySelector("table").textContent).toBe(fakeState.products);

        global.fetch.mockRestore();
    })

The test fails because the content of TableComponent is not rendering.

Aucun commentaire:

Enregistrer un commentaire