aleph.js
aleph.js copied to clipboard
alephjs
Testing environment
Hi
I would like to know if you have any suggestion on how to add a friendly testing environment. I found it difficult to take advance of the existing testing libraries for React in the Deno ecosystem.
I was thinking about sharing some code to test the examples/hello-world sources.
My latest attempt highlighted that :
- I do not know how to switch between the
reactdevelopment and production sources without affecting the whole project -
react-test-rendererseems to be strongly link to Node.
The hard coddedprocess.env.NODE_ENV, the code negation, the module.require call or the MessageChannel are the Deno nightmares... - Out of this raw case, the common wrapper
@testing-library/react-hookslibrary make us suffer from shadowrequirefate - Bringing DOM implementation can be an option (kind of heavy for hooks testing) but
-
jsdomrequireshttps-proxy-agentwithtls(Unsupported by esm.sh for now) -
linkedomrequires builtin nodeperf-hooksthat I successfully replaced byuniversal-perf-hooksby scoping it"scopes": { "https://cdn.esm.sh/v41/[email protected]/": { "https://cdn.esm.sh/v41/node_perf_hooks.js": "https://esm.sh/[email protected]" } }
-
@douglasduteil I can't completely answer your questions, but I want to share some of my findings.
- jspm version of jsdom seems working with deno
import jsdom from "https://dev.jspm.io/jsdom";
const { JSDOM } = jsdom;
const doc = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);
- I couldn't import
@testing-library/reactfrom esm.sh, skypack, jspm.io, butumdversion in the published package seems working. I was able to run the test like the below:
test.jsx
import "https://unpkg.com/[email protected]/umd/react.development.js";
import "https://unpkg.com/[email protected]/umd/react-dom.development.js";
import "https://unpkg.com/@testing-library/[email protected]/dist/@testing-library/react.umd.js";
import jsdom from "https://dev.jspm.io/jsdom";
import { assert } from "https://deno.land/[email protected]/testing/asserts.ts";
const { render } = TestingLibraryReact; // <- Umd testing-library exports this in global
Deno.test("test", async () => {
const { JSDOM } = jsdom;
const doc = new JSDOM(`<!DOCTYPE html><p>Hello world</p>`);
globalThis.document = doc.window.document;
globalThis.HTMLIFrameElement = doc.window.HTMLIFrameElement; // Needed for testing-library
const { getByText } = render(<div>hello</div>);
assert(getByText("hello") instanceof doc.window.HTMLDivElement);
// Needs to wait a little bit to prevent the leaking of the timer.
await new Promise(r => setTimeout(r, 10));
});
deno test test.jsx
I'm not sure if it's possible to make this work with esm.sh version of react/react-dom at the moment
That helps a lot @kt3k Thanks
I'm not sure how one should handle this but having a import map with your recommendations above setup inside alephjs test will certainly help going forward with tested projects today :)
In the meantime, I'm committing in the https://github.com/denoland/deno_std to add node builtins missing pieces 👍
I'm not sure if it's possible to make this work with esm.sh version of react/react-dom at the moment
It probably won't be able to work.
It's probably going to take a while in general to add testing features, because there is no really more standard testing library for browsers with Deno.
i decide to create new module to support react testing in Deno with esm.sh/react!
it looks like:
import React from "https://esm.sh/react"
import { render } from "https://deno.land/x/obscura/react.ts"
import { assertEquals } from "https://deno.land/std/testing/asserts.ts";
function App(props) {
return <h1>{props.title}</h1>
}
Deno.test('"Hi :)" should be rendered', async () => {
const page = await render(<App title="Hi :)" />)
assertEquals(page.select('App').props.title, "Hi :)")
assertEquals(page.select('App > h1').text, "Hi :)")
page.close()
})
use https://deno.land/x/[email protected] as the dom observer
