Merge pull request #24 from oslabs-beta/john/testingLibrary

John/testing library

Author: ruifan-IU

README.md

@@ -43,4 +43,4 @@ Contributions are always welcome. Please create a fork from https://github.com/o
 4. `npm run link-package`
  1. Links React Query Rewind
 5. `npm run example-1`
- 1. Starts the example server with webpack
+ 1. Starts the example server with webpack 

__tests__/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import ReactQueryRewind from '../src/index'
+import { render } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+
+describe('Renders when a query client is provided', () => {
+ // mock query client
+ const queryClient = new QueryClient();
+
+ // we **might** want to add clean error handling for developers to ensure the component fails gracefully
+ // This fails if I don't create a query client and wrap ReactQueryRewind around a QueryClientProvider component and the same thing would happen in production
+ // Maybe we add try/catch block around the useQueryClient hook within ReactQueryRewind component and send a message to the dev tools alerting the developer that they didn't set up the component correctly
+
+ it('renders without crashing', () => {
+ render(
+ <QueryClientProvider client={queryClient}>
+ <ReactQueryRewind/>
+ </QueryClientProvider>
+ );
+ });
+});

babel.config.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+ presets:[
+ '@babel/preset-env',
+ '@babel/preset-react',
+ '@babel/preset-typescript'
+ ]
+}
+

examples/example-2/server/models/postsOne.json

@@ -1,33 +1,11 @@
 {
  "posts": [
  {
- "text": "test",
+ "text": "new",
  "liked": false,
  "comments": [],
  "createComment": false,
- "timestamp": "7:25 PM"
- },
- {
- "text": "new",
- "liked": true,
- "comments": [
- "hi",
- "hi"
- ],
- "createComment": true,
- "timestamp": "5:59 PM"
- },
- {
- "text": "feed 2",
- "liked": true,
- "comments": [
- "comment",
- "comment 1",
- "comment 2",
- "hi"
- ],
- "createComment": true,
- "timestamp": "7:02 PM"
+ "timestamp": "1:17 PM"
  }
  ]
 }

jest.config.cjs

@@ -0,0 +1,26 @@
+module.exports = {
+ // Automatically clear mock calls and instances between every test
+ clearMocks: true,
+
+ // The test environment that will be used for testing
+ testEnvironment: "jsdom",
+
+ // The glob patterns Jest uses to detect test files
+ testMatch: [
+ "**/__tests__/**/*.[jt]s?(x)",
+ "**/?(*.)+(spec|test).[tj]s?(x)"
+ ],
+
+ // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
+ testPathIgnorePatterns: [
+ "/node_modules/"
+ ],
+
+ // A map from regular expressions to paths to transformers
+ transform: {
+ "^.+\\.(js|jsx|ts|tsx)$": "babel-jest"
+ },
+
+ // Indicates whether each individual test should be reported during the run
+ verbose: true,
+};