coder/site/jest.setup.ts

74 lines
2.1 KiB
TypeScript
Raw Permalink Normal View History

import "@testing-library/jest-dom";
import "jest-location-mock";
import { cleanup } from "@testing-library/react";
import crypto from "crypto";
import { useMemo } from "react";
import type { Region } from "api/typesGenerated";
import type { ProxyLatencyReport } from "contexts/useProxyLatency";
import { server } from "testHelpers/server";
// useProxyLatency does some http requests to determine latency.
// This would fail unit testing, or at least make it very slow with
// actual network requests. So just globally mock this hook.
jest.mock("contexts/useProxyLatency", () => ({
useProxyLatency: (proxies?: Region[]) => {
// Must use `useMemo` here to avoid infinite loop.
// Mocking the hook with a hook.
const proxyLatencies = useMemo(() => {
if (!proxies) {
return {} as Record<string, ProxyLatencyReport>;
}
return proxies.reduce(
(acc, proxy) => {
acc[proxy.id] = {
accurate: true,
// Return a constant latency of 8ms.
// If you make this random it could break stories.
latencyMS: 8,
at: new Date(),
};
return acc;
},
{} as Record<string, ProxyLatencyReport>,
);
}, [proxies]);
return { proxyLatencies, refetch: jest.fn() };
},
}));
global.scrollTo = jest.fn();
window.HTMLElement.prototype.scrollIntoView = jest.fn();
window.open = jest.fn();
2022-05-06 18:23:03 +00:00
// Polyfill the getRandomValues that is used on utils/random.ts
Object.defineProperty(global.self, "crypto", {
value: {
getRandomValues: function (buffer: Buffer) {
return crypto.randomFillSync(buffer);
2022-05-06 18:23:03 +00:00
},
},
});
2022-05-06 18:23:03 +00:00
// Establish API mocking before all tests through MSW.
beforeAll(() =>
server.listen({
onUnhandledRequest: "warn",
}),
);
// Reset any request handlers that we may add during the tests,
// so they don't affect other tests.
afterEach(() => {
cleanup();
server.resetHandlers();
jest.resetAllMocks();
});
// Clean up after the tests are finished.
afterAll(() => server.close());
fix: UX - Error logs in development from Empty state component (#466) Fixes #452 When the empty state is rendered with a non-textual element (which it turns out all our current empty states are, because they have a `<button />` component as a call to action), this noisy error log was showing up in the `console`: ``` Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. at div at div at p at Typography (webpack-internal:///./node_modules/@material-ui/core/esm/Typography/Typography.js:166:28) at WithStyles (webpack-internal:///./node_modules/@material-ui/styles/esm/withStyles/withStyles.js:64:31) at div at StyledComponent (webpack-internal:///./node_modules/@material-ui/styles/esm/styled/styled.js:95:28) at EmptyState (webpack-internal:///./src/components/EmptyState/index.tsx:47:25) ... at ProjectsPage (webpack-internal:///./src/pages/projects/index.tsx:37:18) at Routes (webpack-internal:///./node_modules/react-router/index.js:275:5) at ThemeProvider (webpack-internal:///./node_modules/@material-ui/styles/esm/ThemeProvider/ThemeProvider.js:44:24) at UserProvider (webpack-internal:///./src/contexts/UserContext.tsx:100:55) at SWRConfig$1 (webpack-internal:///./node_modules/swr/dist/index.esm.js:501:23) at Router (webpack-internal:///./node_modules/react-router/index.js:209:15) at BrowserRouter (webpack-internal:///./node_modules/react-router-dom/index.js:118:5) at App ``` The issue was that the `description` prop could either be a `string` or an actual `React` component, but was always rendered as a child of a `<Typography />` component. The `<Typography>` component internally renders as a `<p>`, which is not valid to nest `<div>`s inside. The fix is to not nest inside a `<Typography />` block, but an actual `<div />`.
2022-03-17 03:17:41 +00:00
// This is needed because we are compiling under `--isolatedModules`
export {};