mirror of
https://github.com/coder/coder.git
synced 2026-09-24 15:04:27 +08:00
Bryan
edd8345658
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 />`.
57 lines
1.5 KiB
JavaScript
57 lines
1.5 KiB
JavaScript
module.exports = {
|
|
projects: [
|
|
{
|
|
globals: {
|
|
"ts-jest": {
|
|
tsconfig: "tsconfig.test.json",
|
|
},
|
|
},
|
|
coverageReporters: ["text", "lcov"],
|
|
displayName: "test",
|
|
preset: "ts-jest",
|
|
|
|
roots: ["<rootDir>"],
|
|
setupFilesAfterEnv: ["./jest.setup.ts"],
|
|
transform: {
|
|
"^.+\\.tsx?$": "ts-jest",
|
|
},
|
|
testEnvironment: "jsdom",
|
|
testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
|
|
testPathIgnorePatterns: ["/node_modules/", "/__tests__/fakes", "/e2e/"],
|
|
moduleDirectories: ["node_modules", "<rootDir>"],
|
|
},
|
|
{
|
|
displayName: "lint",
|
|
runner: "jest-runner-eslint",
|
|
testMatch: ["<rootDir>/**/*.js", "<rootDir>/**/*.ts", "<rootDir>/**/*.tsx"],
|
|
testPathIgnorePatterns: ["/out/", "/_jest/", "jest.config.js", "jest-runner.*.js"],
|
|
},
|
|
],
|
|
collectCoverageFrom: [
|
|
"<rootDir>/**/*.js",
|
|
"<rootDir>/**/*.ts",
|
|
"<rootDir>/**/*.tsx",
|
|
"!<rootDir>/**/*.stories.tsx",
|
|
"!<rootDir>/_jest/**/*.*",
|
|
"!<rootDir>/api.ts",
|
|
"!<rootDir>/coverage/**/*.*",
|
|
"!<rootDir>/e2e/**/*.*",
|
|
"!<rootDir>/jest-runner.eslint.config.js",
|
|
"!<rootDir>/jest.config.js",
|
|
"!<rootDir>/webpack.*.ts",
|
|
"!<rootDir>/out/**/*.*",
|
|
"!<rootDir>/storybook-static/**/*.*",
|
|
],
|
|
reporters: [
|
|
"default",
|
|
[
|
|
"jest-junit",
|
|
{
|
|
suiteName: "Front-end Jest Tests",
|
|
outputDirectory: "./test-results",
|
|
outputName: "junit.xml",
|
|
},
|
|
],
|
|
],
|
|
}
|