) => {
178 | createEffect(() => {
179 | ref.dataset.directive = arg();
180 | });
181 | };
182 | const { asFragment, setArg } = renderDirective(argDirective, {
183 | initialValue: "initial value",
184 | targetElement: "span"
185 | });
186 | expect(asFragment()).toBe('');
187 | setArg("updated value");
188 | expect(asFragment()).toBe('');
189 | });
190 |
191 | test("testEffect allows testing an effect asynchronously", () => {
192 | const [value, setValue] = createSignal(0);
193 | return testEffect(done =>
194 | createEffect((run: number = 0) => {
195 | if (run === 0) {
196 | expect(value()).toBe(0);
197 | setValue(1);
198 | } else if (run === 1) {
199 | expect(value()).toBe(1);
200 | done();
201 | }
202 | return run + 1;
203 | })
204 | );
205 | });
206 |
207 | test("testEffect catches errors", () => {
208 | const [value, setValue] = createSignal<{ error: string } | null>({ error: "not yet" });
209 | return testEffect(done =>
210 | createEffect((run: number = 0) => {
211 | value()!.error;
212 | if (run === 0) {
213 | setValue(null);
214 | }
215 | if (run === 1) {
216 | done();
217 | }
218 | return run + 1;
219 | })
220 | )
221 | .then(() => {
222 | throw new Error("Error swallowed by testEffect!");
223 | })
224 | .catch((e: Error) => expect(e.name).toBe("TypeError"));
225 | });
226 |
227 | test("testEffect runs with owner", () => {
228 | const [owner, dispose] = createRoot(dispose => [getOwner(), dispose]);
229 | return testEffect(
230 | done =>
231 | createEffect(() => {
232 | expect(getOwner()!.owner).toBe(owner);
233 | dispose();
234 | done();
235 | }),
236 | owner!
237 | );
238 | });
239 |
240 |
--------------------------------------------------------------------------------
/src/__tests__/broken-cleanup.tsx:
--------------------------------------------------------------------------------
1 | vi.mock('solid-js', () => ({ hydrate: () => {}, render: () => {} }));
2 | import { render } from '..';
3 |
4 | const errors: Event[] = [];
5 | const handler = (ev: Event) => errors.push(ev);
6 | globalThis.addEventListener('error', handler);
7 |
8 | test('trigger auto-cleanup', () => {
9 | render(() => Hi
);
10 | });
11 |
12 | test('check if auto-cleanup threw an error', () => {
13 | expect(errors).toEqual([]);
14 | globalThis.removeEventListener('error', handler);
15 | });
16 |
17 |
--------------------------------------------------------------------------------
/src/__tests__/cleanup.tsx:
--------------------------------------------------------------------------------
1 | import "@testing-library/jest-dom/vitest";
2 | import { onCleanup, render as soildRender } from "solid-js";
3 | import { cleanup, render } from "..";
4 |
5 | test("cleans up the document", () => {
6 | const spy = vi.fn();
7 | const divId = "my-div";
8 |
9 | function Test() {
10 | onCleanup(() => {
11 | expect(document.getElementById(divId)).toBeInTheDocument();
12 | spy();
13 | });
14 | return ;
15 | }
16 |
17 | render(() => );
18 | cleanup();
19 | expect(document.body.innerHTML).toBe("");
20 | expect(spy).toHaveBeenCalledTimes(1);
21 | });
22 |
23 | test("cleanup does not error when an element is not a child", () => {
24 | render(() => , { container: document.createElement("div") });
25 | cleanup();
26 | });
27 |
28 |
--------------------------------------------------------------------------------
/src/__tests__/debug.tsx:
--------------------------------------------------------------------------------
1 | import "@testing-library/jest-dom/vitest";
2 | import { screen, render } from "..";
3 |
4 | beforeEach(() => {
5 | vi.spyOn(console, "log").mockImplementation(() => {});
6 | });
7 |
8 | afterEach(() => {
9 | // @ts-ignore
10 | console.log.mockRestore();
11 | });
12 |
13 | test("debug pretty prints the container", () => {
14 | const HelloWorld = () => Hello World
;
15 |
16 | render(() => );
17 |
18 | screen.debug();
19 |
20 | expect(console.log).toHaveBeenCalledTimes(1);
21 | expect(console.log).toHaveBeenCalledWith(expect.stringContaining("Hello World"));
22 | });
23 |
24 | test("debug pretty prints multiple containers", () => {
25 | const HelloWorld = () => (
26 | <>
27 | Hello World
28 | Hello World
29 |
30 | );
31 |
32 | const { debug, getAllByTestId } = render(() => );
33 | const multipleElements = getAllByTestId("testId");
34 | debug(multipleElements);
35 | expect(console.log).toHaveBeenCalledTimes(2);
36 | expect(console.log).toHaveBeenCalledWith(expect.stringContaining("Hello World"));
37 | });
38 |
39 | test("allows same arguments as prettyDOM", () => {
40 | const HelloWorld = () => Hello World
;
41 | const { debug, container } = render(() => );
42 | debug(container, 6, { highlight: false });
43 | expect(console.log).toHaveBeenCalledTimes(1);
44 | // @ts-ignore
45 | expect(console.log.mock.calls[0]).toMatchInlineSnapshot(`
46 | [
47 | "
48 | ...",
49 | ]
50 | `);
51 | });
52 |
--------------------------------------------------------------------------------
/src/__tests__/end-to-end.tsx:
--------------------------------------------------------------------------------
1 | import "@testing-library/jest-dom/vitest";
2 | import { createResource, Show } from "solid-js";
3 | import { screen, render, waitForElementToBeRemoved } from "..";
4 |
5 | const fetchAMessage = () =>
6 | new Promise<{ returnedMessage: string }>(resolve => {
7 | // we are using random timeout here to simulate a real-time example
8 | // of an async operation calling a callback at a non-deterministic time
9 | const randomTimeout = Math.floor(Math.random() * 100);
10 |
11 | setTimeout(() => {
12 | resolve({ returnedMessage: "Hello World" });
13 | }, randomTimeout);
14 | });
15 |
16 | function ComponentWithLoader() {
17 | const [data] = createResource("data", fetchAMessage);
18 | return (
19 | Loading...
}>
20 | Loaded this message: {data()!.returnedMessage}!
21 | 
3 |