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