/
use-breakpoint-value-ssr.test.tsx
127 lines (110 loc) · 3.1 KB
/
use-breakpoint-value-ssr.test.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import React from "react"
import { renderToStaticMarkup } from "react-dom/server"
import { ChakraProvider } from "@chakra-ui/react"
import { theme } from "./test-data"
import { useBreakpointValue } from "../src"
jest.mock("@chakra-ui/utils", () => ({
...jest.requireActual("@chakra-ui/utils"),
isBrowser: false,
}))
beforeEach(() => {
jest.resetAllMocks()
})
describe("with defaultBreakpoint", () => {
// To clean up erroneous console warnings from react, we temporarliy force
// useLayoutEffect to behave like useEffect. Since neither can run in our SSR
// tests, it has no functional impact, but stops the huge console dumps that
// React causes.
let useLayoutEffect: typeof React.useLayoutEffect
beforeAll(() => {
useLayoutEffect = React.useLayoutEffect
React.useLayoutEffect = React.useEffect
})
afterAll(() => {
React.useLayoutEffect = useLayoutEffect
})
// NOTE: We do not setup matchMedia as we wish to simulate an SSR environment
const values = {
base: "base",
sm: "sm",
md: "md",
lg: "lg",
xl: "xl",
customBreakpoint: "customBreakpoint",
}
test("sm", () => {
const html = ssrRenderWithDefaultBreakpoint(values, "sm")
Object.keys(values).forEach((key) => {
if (key === "sm") {
expect(html).toContain(key)
} else {
expect(html).not.toContain(key)
}
})
})
test("md", () => {
const html = ssrRenderWithDefaultBreakpoint(values, "md")
Object.keys(values).forEach((key) => {
if (key === "md") {
expect(html).toContain(key)
} else {
expect(html).not.toContain(key)
}
})
})
test("lg", () => {
const html = ssrRenderWithDefaultBreakpoint(values, "lg")
Object.keys(values).forEach((key) => {
if (key === "lg") {
expect(html).toContain(key)
} else {
expect(html).not.toContain(key)
}
})
})
test("xl", () => {
const html = ssrRenderWithDefaultBreakpoint(values, "xl")
Object.keys(values).forEach((key) => {
if (key === "xl") {
expect(html).toContain(key)
} else {
expect(html).not.toContain(key)
}
})
})
test("customBreakpoint", () => {
const html = ssrRenderWithDefaultBreakpoint(values, "customBreakpoint")
Object.keys(values).forEach((key) => {
if (key === "customBreakpoint") {
expect(html).toContain(key)
} else {
expect(html).not.toContain(key)
}
})
})
test("base value is used if no breakpoint matches", () => {
const values = { base: "base", md: "md" }
const html = ssrRenderWithDefaultBreakpoint(values, "sm")
expect(html).toContain("base")
})
})
function ssrRenderWithDefaultBreakpoint(
values: any,
defaultBreakpoint: string,
) {
return renderToStaticMarkup(
<ChakraProvider theme={theme}>
<TestComponent values={values} defaultBreakpoint={defaultBreakpoint} />
</ChakraProvider>,
)
}
const TestComponent = ({
values,
defaultBreakpoint = undefined,
}: {
values: any
defaultBreakpoint?: string
}) => {
const value = useBreakpointValue(values, defaultBreakpoint)
return <>{value}</>
}