### Install Solid Testing Library

Source: https://github.com/solidjs/solid-testing-library/blob/main/README.md

Install the Solid Testing Library as a development dependency using npm.

```sh
npm install --save-dev @solidjs/testing-library
```

--------------------------------

### Render Component (Preact)

Source: https://github.com/solidjs/solid-testing-library/blob/main/README.md

Example of rendering a component using @testing-library/preact.

```tsx
// With @testing-library/preact
const results = render(<YourComponent />, options);
```

--------------------------------

### Render Component (Solid)

Source: https://github.com/solidjs/solid-testing-library/blob/main/README.md

Example of rendering a component using solid-testing-library. The render function takes a function that returns a Solid Component.

```tsx
// With solid-testing-library
const results = render(() => <YourComponent />, options);
```

--------------------------------

### Test a Simple Hook

Source: https://github.com/solidjs/solid-testing-library/blob/main/README.md

Example of using renderHook to test a simple Solid.js hook. The result of the hook is directly accessible.

```ts
const { result } = renderHook(createResult);
expect(result).toBe(true);
```

--------------------------------

### Test Component with Router Location

Source: https://github.com/solidjs/solid-testing-library/blob/main/README.md

Example of testing a Solid.js component that uses routing, by providing an initial location to the render function. This requires asynchronous queries like findByText.

```tsx
it('uses params', async () => {
  const App = () => (
    <>
      <Route path="/ids/:id" component={() => <p>Id: {useParams()?.id}</p>} />
      <Route path="/" component={() => <p>Start</p>} />
    </>
  ); 
  const { findByText } = render(() => <App />, { location: "ids/1234" });
  expect(await findByText("Id: 1234")).not.toBeFalsy();
});
```

--------------------------------

### Test a Custom Directive

Source: https://github.com/solidjs/solid-testing-library/blob/main/README.md

Example of using renderDirective to test a custom Solid.js directive. It demonstrates testing the initial state and updating the directive's argument.

```ts
const { asFragment, setArg } = renderDirective(myDirective);
expect(asFragment()).toBe(
  '<div data-directive="works"></div>'
);
setArg("perfect");
expect(asFragment()).toBe(
  '<div data-directive="perfect"></div>'
);
```

--------------------------------

### Testing Asynchronous Effects with testEffect

Source: https://github.com/solidjs/solid-testing-library/blob/main/README.md

Use testEffect to asynchronously test Solid.js effects. It takes a function that receives a 'done' callback and an optional owner. The function returns a Promise that resolves with the value passed to 'done()'.

```typescript
testEffect(fn: (done: (result: T) => void) => void, owner?: Owner): Promise<T>
```

```typescript
// use it like this:
test("testEffect allows testing an effect asynchronously", () => {
  const [value, setValue] = createSignal(0);
  return testEffect(done => createEffect((run: number = 0) => {
    if (run === 0) {
      expect(value()).toBe(0);
      setValue(1);
    } else if (run === 1) {
      expect(value()).toBe(1);
      done();
    }
    return run + 1;
  }));
});
```

--------------------------------

### Render Hook Function Signature

Source: https://github.com/solidjs/solid-testing-library/blob/main/README.md

The function signature for renderHook, used for testing Solid.js hooks. It returns the hook's result, an owner, and a cleanup function.

```ts
function renderHook<Args extends any[], Result>(
  hook: (...args: Args) => Result,
  options: {
    initialProps?: Args,
    wrapper?: Component<{ children: JSX.Element }>
  }
) => {
  result: Result;
  owner: Owner | null;
  cleanup: () => void;
}
```

--------------------------------

### Render Directive Function Signature

Source: https://github.com/solidjs/solid-testing-library/blob/main/README.md

The function signature for renderDirective, used for testing Solid.js custom directives. It extends renderHook with directive-specific options and return values.

```ts
function renderDirective< 
  Arg extends any, 
  Elem extends HTMLElement 
>(
  directive: (ref: Elem, arg: Accessor<Arg>) => void,
  options?: {
    ...renderOptions,
    initialValue: Arg,
    targetElement: 
      | Lowercase<Elem['nodeName']>
      | Elem
      | (() => Elem)
  }
): Result & { arg: Accessor<Arg>, setArg: Setter<Arg> };
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.