Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@nextglabs
nextglabs committed May 20, 2021
0 parents commit 29221f1
Show file tree
Hide file tree
Showing 23 changed files with 13,748 additions and 0 deletions.
23 changes: 23 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
22 changes: 22 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
# How to Test React-Query Components

This project has been created to demonstrate how to easily test React components that rely on [React-Query](https://react-query.tanstack.com/) using Jest, Testing Library, Typescript and ChakraUI.

## Medium Article

You can read the Medium article on [How to Test React-Query Components]
//TODO: add URL

## Getting Started

### `yarn start`

Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.\
You will also see any lint errors in the console.

### `yarn test`

Launches the test runner in the interactive watch mode.
48 changes: 48 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
{
"name": "testing-react-query-components",
"version": "0.1.0",
"private": true,
"dependencies": {
"@chakra-ui/react": "^1.6.2",
"@emotion/react": "11",
"@emotion/styled": "11",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.23",
"@types/node": "^15.3.0",
"@types/react": "^17.0.6",
"@types/react-dom": "^17.0.5",
"framer-motion": "4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-query": "^3.16.0",
"react-scripts": "4.0.3",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Binary file added public/favicon.ico
Binary file not shown.
43 changes: 43 additions & 0 deletions public/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
Binary file added public/logo192.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/logo512.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 25 additions & 0 deletions public/manifest.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
3 changes: 3 additions & 0 deletions public/robots.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
13 changes: 13 additions & 0 deletions src/App.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from "react";
import { render } from "@testing-library/react";
import App from "./App";
import { QueryClient, QueryClientProvider } from "react-query";

test("Renders without crashing", () => {
const client = new QueryClient();
render(
<QueryClientProvider client={client}>
<App />
</QueryClientProvider>,
);
});
13 changes: 13 additions & 0 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from 'react';
import { Wrapper } from "./components/Wrapper";
import { StoreApi } from "./services/store";

export const store = new StoreApi("https://fakestoreapi.com");

export default function App() {
return (
<div className="App">
<Wrapper />
</div>
);
}
74 changes: 74 additions & 0 deletions src/components/ProductDetails.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import React from "react";
import { render } from "@testing-library/react";
import { useProduct } from "../hooks/useProduct";
import { ProductDetails } from "./ProductDetails";

// Solves TypeScript Errors
const mockedUseProduct = useProduct as jest.Mock<any>;

// Mock the module
jest.mock("../hooks/useProduct");

describe("<ProductDetails />", () => {
beforeEach(() => {
mockedUseProduct.mockImplementation(() => ({ isLoading: true }));
});
afterEach(() => {
jest.clearAllMocks();
});

it("Renders without crashing", () => {
render(<ProductDetails />);
});

it("Fetches the correct ID", () => {
const { rerender } = render(<ProductDetails />);

// Fetches a default product when `productId` isn't specified (id="1")
expect(useProduct).toHaveBeenCalledWith("1");

rerender(<ProductDetails productId="2" />);

expect(useProduct).toHaveBeenCalledWith("2");
expect(useProduct).toHaveBeenCalledTimes(2);
});

it("Displays loading indicator", () => {
const { getByText } = render(<ProductDetails />);

expect(getByText(/fetching data.../i)).toBeVisible();
});

it("Displays error message", () => {
mockedUseProduct.mockImplementation(() => ({
isLoading: false,
isError: true,
error: { message: "Unable to fetch the product data" },
}));
const { getByText, queryByText } = render(<ProductDetails />);

expect(queryByText(/fetching data/i)).toBeFalsy(); // We don't want the loading flag to be displayed
getByText(/unable to fetch the product data/i);
});

it("Displays data", () => {
const mockedProductData = {
title: "Test Title",
description: "Test Description",
price: 123.45,
category: "Test Category",
image: "https://example.com/image.jpg",
};
mockedUseProduct.mockImplementation(() => ({ isLoading: false, data: mockedProductData }));

const { getByText, queryByText } = render(<ProductDetails />);

// We don't want the loading flag to be displayed
expect(queryByText(/fetching data/i)).toBeFalsy();

getByText(mockedProductData.title);
getByText(mockedProductData.description);
getByText(mockedProductData.category);
getByText(new RegExp(mockedProductData.price.toString()));
});
});
61 changes: 61 additions & 0 deletions src/components/ProductDetails.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import React from "react";
import {
Badge,
Box,
Heading,
Spinner,
Text,
VStack,
Image,
Button,
Alert,
AlertIcon,
AlertTitle,
AlertDescription,
} from "@chakra-ui/react";
import { useProduct } from "../hooks/useProduct";

export interface ProductDetailsProps {
/**
* The ID of the product to be displayed
* @default "1"
*/
productId?: string;
}
export const ProductDetails = ({ productId = "1" }: ProductDetailsProps) => {
const { isLoading, isError, error, data } = useProduct(productId);
if (isLoading) {
return (
<Box>
<Spinner />
<Text>Fetching Data...</Text>
</Box>
);
}

if (isError) {
return (
<Alert status="error">
<AlertIcon />
<AlertTitle mr={2}>Error</AlertTitle>
<AlertDescription>{error?.message}</AlertDescription>
</Alert>
);
}

const { title, price, description, category, image } = data || {};

return (
<Box>
<VStack spacing="3">
<Image src={image} boxSize="150px" data-testid="product-image"/>
<Badge borderRadius="full" px="2" colorScheme="pink">
{category}
</Badge>
<Heading size="lg">{title}</Heading>
<Text>{description}</Text>
<Button colorScheme="blue">Buy Now &bull; ${price}</Button>
</VStack>
</Box>
);
};
27 changes: 27 additions & 0 deletions src/components/Wrapper.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import React from "react";
import { Box } from "@chakra-ui/react";
import { ProductDetails } from "./ProductDetails";

export const Wrapper = () => {
// Allow the use of query parameters to define the id of the product to be fetched
const { searchParams } = new URL(window.location.href);
const productId = searchParams.get("id") || "1";

return (
<Box display="flex" alignItems="center" justifyContent="center" height="100vh" background="gray.200">
<Box
maxW="lg"
minW="sm"
borderRadius="lg"
overflow="hidden"
m="10"
p="10"
shadow="xl"
background="white"
textAlign="center"
>
<ProductDetails productId={productId} />
</Box>
</Box>
);
};
7 changes: 7 additions & 0 deletions src/hooks/useProduct.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { useQuery } from "react-query";
import { store } from "../App";
import { Product } from "../services/types";

export const useProduct = (id: string) => {
return useQuery<Product, Error>(["product", id], () => store.getProductById(id), { retry: false })
}
26 changes: 26 additions & 0 deletions src/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React, { StrictMode } from "react";
import ReactDOM from "react-dom";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { ChakraProvider } from "@chakra-ui/react";
import { QueryClient, QueryClientProvider } from "react-query";

// Initialize React-Query Client
const client = new QueryClient();

const rootElement = document.getElementById("root");
ReactDOM.render(
<StrictMode>
<QueryClientProvider client={client}>
<ChakraProvider>
<App />
</ChakraProvider>
</QueryClientProvider>
</StrictMode>,
rootElement,
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
Loading

0 comments on commit 29221f1

Please sign in to comment.