From 13883b9ed169aa6228ff2e6c25b7cb22fc3d2fac Mon Sep 17 00:00:00 2001 From: ericv105 Date: Tue, 10 Jan 2023 19:07:45 -0500 Subject: [PATCH] apply pre-commit --- website/README.md | 1 + website/cypress.config.js | 2 +- website/cypress/components/Container.cy.tsx | 5 +++- website/jest.config.js | 16 +++++------ website/jest.setup.js | 2 +- website/src/README.md | 30 ++++++++++++++++----- website/src/pages.test/about.test.tsx | 2 +- website/src/test-utils/createMockRouter.ts | 2 +- 8 files changed, 40 insertions(+), 20 deletions(-) diff --git a/website/README.md b/website/README.md index 3187f9d4..3765d293 100644 --- a/website/README.md +++ b/website/README.md @@ -138,6 +138,7 @@ A few npm scripts are available for convenience: Read more in the [./cypress README](cypress/). ## Unit testing + Jest and React Testing Library are used for unit testing JS/TS/TSX code. - Store unit test files adjacent to the file being tested and have the filename diff --git a/website/cypress.config.js b/website/cypress.config.js index f888881e..6703989c 100644 --- a/website/cypress.config.js +++ b/website/cypress.config.js @@ -21,7 +21,7 @@ export default defineConfig({ // implement node event listeners here getCompareSnapshotsPlugin(on, config); }, - specPattern: "cypress/components/*.cy.tsx" + specPattern: "cypress/components/*.cy.tsx", }, env: { diff --git a/website/cypress/components/Container.cy.tsx b/website/cypress/components/Container.cy.tsx index 858ff9a9..a906725a 100644 --- a/website/cypress/components/Container.cy.tsx +++ b/website/cypress/components/Container.cy.tsx @@ -8,6 +8,9 @@ describe("", () => { const className = "my-class"; const text = "test_container"; cy.mount({text}); - cy.get(`div.${className}`).should("have.class", className).should("be.visible").should("contain", text); + cy.get(`div.${className}`) + .should("have.class", className) + .should("be.visible") + .should("contain", text); }); }); diff --git a/website/jest.config.js b/website/jest.config.js index c4c679f4..3ee31b70 100644 --- a/website/jest.config.js +++ b/website/jest.config.js @@ -1,20 +1,20 @@ // jest.config.js -const nextJest = require('next/jest') +const nextJest = require("next/jest"); const createJestConfig = nextJest({ // Provide the path to your Next.js app to load next.config.js and .env files in your test environment - dir: './', -}) + dir: "./", +}); // Add any custom config to be passed to Jest /** @type {import('jest').Config} */ const customJestConfig = { // Add more setup options before each test is run - setupFilesAfterEnv: ['/jest.setup.js'], + setupFilesAfterEnv: ["/jest.setup.js"], // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work - moduleDirectories: ['node_modules', '/'], - testEnvironment: 'jest-environment-jsdom', -} + moduleDirectories: ["node_modules", "/"], + testEnvironment: "jest-environment-jsdom", +}; // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async -module.exports = createJestConfig(customJestConfig) \ No newline at end of file +module.exports = createJestConfig(customJestConfig); diff --git a/website/jest.setup.js b/website/jest.setup.js index e66f309e..ad304f04 100644 --- a/website/jest.setup.js +++ b/website/jest.setup.js @@ -1,2 +1,2 @@ // jest.setup.js -import '@testing-library/jest-dom/extend-expect' \ No newline at end of file +import "@testing-library/jest-dom/extend-expect"; diff --git a/website/src/README.md b/website/src/README.md index 775845fe..d1aa6841 100644 --- a/website/src/README.md +++ b/website/src/README.md @@ -1,10 +1,13 @@ - # Unit testing with Jest and React Testing Library -[Jest](https://jestjs.io/) is a test runner that is commonly coupled with [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) for creating unit tests. +[Jest](https://jestjs.io/) is a test runner that is commonly coupled with +[React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) for creating unit tests. ## Creating tests -To begin writing tests, create a file ending in `.test.ts` for non-React code or a file ending with `.test.tsx` for testing React code. For example, a test file for React component `TaskOption.tsx` would be named `TaskOption.test.tsx` and would be created within the same directory as the component. + +To begin writing tests, create a file ending in `.test.ts` for non-React code or a file ending with `.test.tsx` for +testing React code. For example, a test file for React component `TaskOption.tsx` would be named `TaskOption.test.tsx` +and would be created within the same directory as the component. ``` // TaskOption.test.tsx @@ -44,13 +47,26 @@ describe("TaskOption component", () => { }); ``` -This is a test that checks if the component has rendered correctly and if it navigates properly on click. The testing methods, component, and its props type are imported. The `describe` is a Jest method that is used to group related tests together while the `it` is what actually runs a test. -A testProps object is created and passed to the component to be rendered using the `render` method. Now it can be tested. Query methods like `getByRole` and others listed in the [testing library's docs](https://testing-library.com/docs/react-testing-library/cheatsheet#queries) can be used to search for elements in the page. Finally, `expect` is run on those elements to see if they match the values in the props that were originally declared. If they match, the test passes. If they do not match or if an error occurs, the test fails. +This is a test that checks if the component has rendered correctly and if it navigates properly on click. The testing +methods, component, and its props type are imported. The `describe` is a Jest method that is used to group related tests +together while the `it` is what actually runs a test. + +A testProps object is created and passed to the component to be rendered using the `render` method. Now it can be +tested. Query methods like `getByRole` and others listed in the +[testing library's docs](https://testing-library.com/docs/react-testing-library/cheatsheet#queries) can be used to +search for elements in the page. Finally, `expect` is run on those elements to see if they match the values in the props +that were originally declared. If they match, the test passes. If they do not match or if an error occurs, the test +fails. + +In the second test, a mock router is used to simulate Next's router. The TaskOption component is rendered with the +router as its parent. To simulate a click, `fireEvent.click()` is used on the element with the role of "link". Finally, +the router can be tested by verifying that the `router.push` method was called with the correct path. Since the push +method is also called with two more arguments `as` and `options` that aren't useful for this specific test, +`expect.anything()` is used to ensure that those arguments are not null or undefined. -In the second test, a mock router is used to simulate Next's router. The TaskOption component is rendered with the router as its parent. To simulate a click, `fireEvent.click()` is used on the element with the role of "link". Finally, the router can be tested by verifying that the `router.push` method was called with the correct path. Since the push method is also called with two more arguments `as` and `options` that aren't useful for this specific test, `expect.anything()` is used to ensure that those arguments are not null or undefined. ## Running tests ``` npm run jest -``` \ No newline at end of file +``` diff --git a/website/src/pages.test/about.test.tsx b/website/src/pages.test/about.test.tsx index f4603bf2..9f97e1c4 100644 --- a/website/src/pages.test/about.test.tsx +++ b/website/src/pages.test/about.test.tsx @@ -5,6 +5,6 @@ describe("About page", () => { it("should render correctly", () => { render(); - expect(screen.getByRole("heading", {level: 1})).toHaveTextContent("What is OpenAssistant?"); + expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("What is OpenAssistant?"); }); }); diff --git a/website/src/test-utils/createMockRouter.ts b/website/src/test-utils/createMockRouter.ts index 121ddf24..161deb1a 100644 --- a/website/src/test-utils/createMockRouter.ts +++ b/website/src/test-utils/createMockRouter.ts @@ -25,7 +25,7 @@ export function createMockRouter(router: Partial): NextRouter { off: jest.fn(), emit: jest.fn(), }, - ...router + ...router, }; return mockRouter; }