51 | ...",
52 | ]
53 | `)
54 | })
55 |
--------------------------------------------------------------------------------
/src/__tests__/end-to-end.js:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom/extend-expect'
2 | import { Component, h } from 'preact'
3 | import { screen, render, waitForElementToBeRemoved } from '..'
4 |
5 | const fetchAMessage = () => new Promise((resolve) => {
6 | // we are using random timeout here to simulate a real-time example
7 | // of an async operation calling a callback at a non-deterministic time
8 | const randomTimeout = Math.floor(Math.random() * 100)
9 |
10 | setTimeout(() => {
11 | resolve({ returnedMessage: 'Hello World' })
12 | }, randomTimeout)
13 | })
14 |
15 | class ComponentWithLoader extends Component {
16 | state = { loading: true }
17 |
18 | componentDidMount () {
19 | fetchAMessage().then(data => {
20 | this.setState({ data, loading: false })
21 | })
22 | }
23 |
24 | render () {
25 | if (this.state.loading) {
26 | return (
Loading...
)
27 | }
28 |
29 | return (
30 |
31 | Loaded this message: {this.state.data.returnedMessage}!
32 |
33 | )
34 | }
35 | }
36 |
37 | test('it waits for the data to be loaded', async () => {
38 | render(
)
39 | const loading = () => screen.getByText('Loading...')
40 | await waitForElementToBeRemoved(loading)
41 | expect(screen.getByTestId('message')).toHaveTextContent(/Hello World/)
42 | })
43 |
--------------------------------------------------------------------------------
/src/__tests__/events-compat.js:
--------------------------------------------------------------------------------
1 | import { h } from 'preact' // required by render
2 | import { fireEvent, render } from '..'
3 | import 'preact/compat'
4 |
5 | test('calling `fireEvent` with `preact/compat` and onChange works too', () => {
6 | const handler = jest.fn()
7 |
8 | // Preact only matches React's aliasing of `onChange` when `preact/compat` is used
9 | // This test ensures this is supported properly with `fireEvent.change()`
10 | const {
11 | container: { firstChild: input }
12 | } = render(
)
13 |
14 | const targetProperties = { value: 'a' }
15 | const otherProperties = { isComposing: true }
16 | const init = {
17 | target: targetProperties,
18 | ...otherProperties
19 | }
20 |
21 | expect(fireEvent.change(input, init)).toBe(true)
22 |
23 | expect(handler).toHaveBeenCalledTimes(1)
24 | expect(handler).toHaveBeenCalledWith(expect.objectContaining(otherProperties))
25 | })
26 |
--------------------------------------------------------------------------------
/src/__tests__/events.js:
--------------------------------------------------------------------------------
1 | import { createRef, h } from 'preact'
2 | import { fireEvent, render } from '..'
3 |
4 | const eventTypes = [
5 | {
6 | type: 'Clipboard',
7 | events: ['copy', 'paste'],
8 | elementType: 'input'
9 | },
10 | {
11 | type: 'Composition',
12 | events: ['compositionEnd', 'compositionStart', 'compositionUpdate'],
13 | elementType: 'input'
14 | },
15 | {
16 | type: 'Keyboard',
17 | events: ['keyDown', 'keyPress', 'keyUp'],
18 | elementType: 'input',
19 | init: { keyCode: 13 }
20 | },
21 | {
22 | type: 'Focus',
23 | events: ['focus', 'blur'],
24 | elementType: 'input'
25 | },
26 | {
27 | type: 'Form',
28 | events: ['focus', 'blur'],
29 | elementType: 'input'
30 | },
31 | {
32 | type: 'Focus',
33 | events: ['input', 'invalid', 'change'],
34 | elementType: 'input'
35 | },
36 | {
37 | type: 'Focus',
38 | events: ['submit'],
39 | elementType: 'form'
40 | },
41 | {
42 | type: 'Mouse',
43 | events: [
44 | 'click',
45 | 'contextMenu',
46 | 'dblClick',
47 | 'drag',
48 | 'dragEnd',
49 | 'dragEnter',
50 | 'dragExit',
51 | 'dragLeave',
52 | 'dragOver',
53 | 'dragStart',
54 | 'drop',
55 | 'mouseDown',
56 | 'mouseEnter',
57 | 'mouseLeave',
58 | 'mouseMove',
59 | 'mouseOut',
60 | 'mouseOver',
61 | 'mouseUp'
62 | ],
63 | elementType: 'button'
64 | },
65 | {
66 | type: 'Selection',
67 | events: ['select'],
68 | elementType: 'input'
69 | },
70 | {
71 | type: 'Touch',
72 | events: ['touchCancel', 'touchEnd', 'touchMove', 'touchStart'],
73 | elementType: 'button'
74 | },
75 | {
76 | type: 'UI',
77 | events: ['scroll'],
78 | elementType: 'div'
79 | },
80 | {
81 | type: 'Wheel',
82 | events: ['wheel'],
83 | elementType: 'div'
84 | },
85 | {
86 | type: 'Media',
87 | events: [
88 | 'abort',
89 | 'canPlay',
90 | 'canPlayThrough',
91 | 'durationChange',
92 | 'emptied',
93 | 'encrypted',
94 | 'ended',
95 | 'error',
96 | 'loadedData',
97 | 'loadedMetadata',
98 | 'loadStart',
99 | 'pause',
100 | 'play',
101 | 'playing',
102 | 'progress',
103 | 'rateChange',
104 | 'seeked',
105 | 'seeking',
106 | 'stalled',
107 | 'suspend',
108 | 'timeUpdate',
109 | 'volumeChange',
110 | 'waiting'
111 | ],
112 | elementType: 'video'
113 | },
114 | {
115 | type: 'Image',
116 | events: ['load', 'error'],
117 | elementType: 'img'
118 | },
119 | {
120 | type: 'Animation',
121 | events: ['animationStart', 'animationEnd', 'animationIteration'],
122 | elementType: 'div'
123 | },
124 | {
125 | type: 'Transition',
126 | events: ['transitionEnd'],
127 | elementType: 'div'
128 | },
129 | {
130 | type: 'Pointer',
131 | events: ['pointerEnter', 'pointerLeave'],
132 | elementType: 'div'
133 | }
134 | ]
135 |
136 | eventTypes.forEach(({ type, events, elementType, init }) => {
137 | describe(`${type} Events`, () => {
138 | events.forEach((eventName) => {
139 | const eventProp = `on${eventName[0].toUpperCase() + eventName.slice(1)}`
140 |
141 | it(`triggers ${eventProp}`, () => {
142 | const ref = createRef()
143 | const spy = jest.fn()
144 |
145 | render(
146 | h(elementType, {
147 | [eventProp]: spy,
148 | ref
149 | })
150 | )
151 |
152 | expect(fireEvent[eventName](ref.current, init)).toBe(true)
153 |
154 | expect(spy).toHaveBeenCalledTimes(1)
155 | if (init) {
156 | expect(spy).toHaveBeenCalledWith(expect.objectContaining(init))
157 | }
158 | })
159 | })
160 | })
161 | })
162 |
163 | test('onInput works', () => {
164 | const handler = jest.fn()
165 |
166 | const {
167 | container: { firstChild: input }
168 | } = render(
)
169 |
170 | const targetProperties = { value: 'a' }
171 | const otherProperties = { isComposing: true }
172 | const init = {
173 | target: targetProperties,
174 | ...otherProperties
175 | }
176 |
177 | expect(fireEvent.input(input, init)).toBe(true)
178 |
179 | expect(handler).toHaveBeenCalledTimes(1)
180 | expect(handler).toHaveBeenCalledWith(expect.objectContaining(otherProperties))
181 | })
182 |
183 | test('calling `fireEvent` directly works too', () => {
184 | const handler = jest.fn()
185 |
186 | const {
187 | container: { firstChild: button }
188 | } = render(
)
189 |
190 | const event = new MouseEvent('click', {
191 | bubbles: true,
192 | cancelable: true,
193 | button: 0
194 | })
195 |
196 | expect(fireEvent(button, event)).toBe(true)
197 |
198 | expect(handler).toHaveBeenCalledTimes(1)
199 | expect(handler).toHaveBeenCalledWith(event)
200 | })
201 |
202 | test('`fireEvent` returns false when prevented', () => {
203 | const {
204 | container: { firstChild: button }
205 | } = render(
206 |
{
208 | e.preventDefault()
209 | }}
210 | />
211 | )
212 |
213 | expect(fireEvent.click(button)).toBe(false)
214 | })
215 |
--------------------------------------------------------------------------------
/src/__tests__/multi-base.js:
--------------------------------------------------------------------------------
1 | import { h } from 'preact'
2 | import { render } from '..'
3 |
4 | // These are created once per test suite and reused for each case
5 | let treeA
6 | let treeB
7 |
8 | beforeAll(() => {
9 | treeA = document.createElement('div')
10 | treeB = document.createElement('div')
11 | document.body.appendChild(treeA)
12 | document.body.appendChild(treeB)
13 | })
14 |
15 | afterAll(() => {
16 | treeA.parentNode.removeChild(treeA)
17 | treeB.parentNode.removeChild(treeB)
18 | })
19 |
20 | test('baseElement isolates trees from one another', () => {
21 | const { getByText: getByTextInA } = render((Jekyll
), {
22 | baseElement: treeA
23 | })
24 |
25 | const { getByText: getByTextInB } = render((Hyde
), {
26 | baseElement: treeB
27 | })
28 |
29 | expect(() => getByTextInA('Jekyll')).not.toThrow(
30 | 'Unable to find an element with the text: Jekyll.'
31 | )
32 |
33 | expect(() => getByTextInB('Jekyll')).toThrow(
34 | 'Unable to find an element with the text: Jekyll.'
35 | )
36 |
37 | expect(() => getByTextInA('Hyde')).toThrow(
38 | 'Unable to find an element with the text: Hyde.'
39 | )
40 |
41 | expect(() => getByTextInB('Hyde')).not.toThrow(
42 | 'Unable to find an element with the text: Hyde.'
43 | )
44 | })
45 |
--------------------------------------------------------------------------------
/src/__tests__/render.js:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom/extend-expect'
2 | import { Component, createRef, h } from 'preact'
3 | import Portal from 'preact-portal'
4 | import { render } from '..'
5 |
6 | test('renders div into document', () => {
7 | const ref = createRef()
8 |
9 | const { container } = render(
)
10 |
11 | expect(container.firstChild).toBe(ref.current)
12 | })
13 |
14 | test('works great with preact portals', () => {
15 | class MyPortal extends Component {
16 | constructor (...args) {
17 | super(...args)
18 |
19 | this.portalNode = document.createElement('div')
20 | this.portalNode.dataset.testid = 'my-portal'
21 | }
22 |
23 | componentDidMount () {
24 | document.body.appendChild(this.portalNode)
25 | }
26 |
27 | componentWillUnmount () {
28 | this.portalNode.parentNode.removeChild(this.portalNode)
29 | }
30 |
31 | render () {
32 | return (
33 |
34 |
36 | )
37 | }
38 | }
39 |
40 | function Greet ({ greeting, subject }) {
41 | return (
42 |
43 |
44 | {greeting} {subject}
45 |
46 |
47 | )
48 | }
49 |
50 | const { unmount, getByTestId, getByText } = render(
)
60 | expect(baseElement).toBe(document.body)
61 | })
62 |
63 | test('supports fragments', () => {
64 | class Comp extends Component {
65 | render () {
66 | return (
67 |
68 | DocumentFragment is pretty cool!
69 |
70 | )
71 | }
72 | }
73 |
74 | const { asFragment } = render({children}
80 |
81 | const { container, getByTestId } = render(
, {
82 | wrapper: WrapperComponent
83 | })
84 |
85 | expect(getByTestId('wrapper')).toBeInTheDocument()
86 | expect(container.firstChild).toMatchInlineSnapshot(`
87 |
94 | `)
95 | })
96 |
--------------------------------------------------------------------------------
/src/__tests__/renderHook.js:
--------------------------------------------------------------------------------
1 | import { createContext, h } from 'preact'
2 | import { useState, useContext, useEffect } from 'preact/hooks'
3 | import { renderHook } from '../pure'
4 |
5 | test('gives comitted result', () => {
6 | const { result } = renderHook(() => {
7 | const [state, setState] = useState(1)
8 |
9 | useEffect(() => {
10 | setState(2)
11 | }, [])
12 |
13 | return [state, setState]
14 | })
15 |
16 | expect(result.current).toEqual([2, expect.any(Function)])
17 | })
18 |
19 | test('allows rerendering', () => {
20 | const { result, rerender } = renderHook(
21 | ({ branch }) => {
22 | const [left, setLeft] = useState('left')
23 | const [right, setRight] = useState('right')
24 |
25 | switch (branch) {
26 | case 'left':
27 | return [left, setLeft]
28 | case 'right':
29 | return [right, setRight]
30 |
31 | default:
32 | throw new Error(
33 | 'No Props passed. This is a bug in the implementation'
34 | )
35 | }
36 | },
37 | { initialProps: { branch: 'left' } }
38 | )
39 |
40 | expect(result.current).toEqual(['left', expect.any(Function)])
41 |
42 | rerender({ branch: 'right' })
43 |
44 | expect(result.current).toEqual(['right', expect.any(Function)])
45 | })
46 |
47 | test('allows wrapper components', async () => {
48 | const Context = createContext('default')
49 | function Wrapper ({ children }) {
50 | return {children}
51 | }
52 | const { result } = renderHook(
53 | () => {
54 | return useContext(Context)
55 | },
56 | {
57 | wrapper: Wrapper
58 | }
59 | )
60 |
61 | expect(result.current).toEqual('provided')
62 | })
63 |
--------------------------------------------------------------------------------
/src/__tests__/rerender.js:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom/extend-expect'
2 | import { h } from 'preact'
3 | import { useState, useEffect } from 'preact/hooks'
4 | import { render } from '..'
5 |
6 | test('rerender will re-render the element', () => {
7 | const Greeting = (props) => {props.message}
8 |
9 | const { container, rerender } = render(
35 | {lapse}ms
36 |
37 | {running ? 'Stop' : 'Start'}
38 |
39 | Clear
40 |
41 | )
42 | }
43 | }
44 |
45 | const wait = (time) => new Promise((resolve) => setTimeout(resolve, time))
46 |
47 | test('unmounts a component', async () => {
48 | jest.spyOn(console, 'error').mockImplementation(() => {})
49 |
50 | const { unmount, getByText, container } = render( = {
8 | container: Element
9 | baseElement: Element
10 | debug: (baseElement?: Element | DocumentFragment) => void
11 | rerender: (ui: ComponentChild) => void
12 | unmount: () => boolean
13 | asFragment: () => DocumentFragment
14 | } & { [P in keyof Q]: BoundFunction }
15 |
16 | export interface RenderOptions {
17 | container?: Element
18 | baseElement?: Element
19 | queries?: Q
20 | wrapper?: ComponentChild
21 | }
22 |
23 | type Omit = Pick>
24 |
25 | /**
26 | * Render into a container which is appended to document.body. It should be used with cleanup.
27 | */
28 | export function render(ui: ComponentChild, options?: Omit): RenderResult
29 |
30 | export function render(
31 | ui: ComponentChild,
32 | options: RenderOptions,
33 | ): RenderResult
34 |
35 | /**
36 | * Unmounts Preact trees that were mounted with render.
37 | */
38 | export function cleanup(): void
39 |
40 | /**
41 | * Simply calls preact/test-utils.act(cb)
42 | *
43 | * If that's not available (older version of preact) then it
44 | * simply calls the given callback immediately
45 | */
46 | export const act: typeof preactAct extends undefined
47 | ? (callback: () => void) => void
48 | : typeof preactAct
49 |
50 | export interface RenderHookResult {
51 | /**
52 | * Triggers a re-render. The props will be passed to your renderHook callback.
53 | */
54 | rerender: (props?: Props) => void
55 | /**
56 | * This is a stable reference to the latest value returned by your renderHook
57 | * callback
58 | */
59 | result: {
60 | /**
61 | * The value returned by your renderHook callback
62 | */
63 | current: Result
64 | }
65 | /**
66 | * Unmounts the test component. This is useful for when you need to test
67 | * any cleanup your useEffects have.
68 | */
69 | unmount: () => void
70 | }
71 |
72 | export interface RenderHookOptions {
73 | /**
74 | * The argument passed to the renderHook callback. Can be useful if you plan
75 | * to use the rerender utility to change the values passed to your hook.
76 | */
77 | initialProps?: Props
78 | /**
79 | * Pass a React Component as the wrapper option to have it rendered around the inner element. This is most useful for creating
80 | * reusable custom render functions for common data providers. See setup for examples.
81 | *
82 | * @see https://testing-library.com/docs/react-testing-library/api/#wrapper
83 | */
84 | wrapper?: ComponentType<{ children: Element }>
85 | }
86 |
87 | /**
88 | * Allows you to render a hook within a test React component without having to
89 | * create that component yourself.
90 | */
91 | export function renderHook(
92 | render: (initialProps: Props) => Result,
93 | options?: RenderHookOptions,
94 | ): RenderHookResult
95 |
--------------------------------------------------------------------------------
/types/pure.d.ts:
--------------------------------------------------------------------------------
1 | export * from './'
2 |
--------------------------------------------------------------------------------
11 |
12 |
13 | 
