Sandpack/nodebox-runtime

Running jest test on Nodebox

s4847043 opened this issue · 4 comments

s4847043 commented

I am trying to run jest test but it is not even starting. I am trying the reason behind at least a log why it did not run.

here is my code:

import { Box } from "@chakra-ui/react";
import { useContext, useEffect, useRef } from "react";
import { FileSystemContext } from "@/contexts/FileSystem";

const TestRunner = () => {
  const { visibleFiles } = useContext(FileSystemContext);
  const iFrame = useRef<HTMLIFrameElement>(null);

  const startEmulator = async () => {
    if (iFrame.current) {
      const { Nodebox } = await import("@codesandbox/nodebox");
      const emulator = new Nodebox({
        iframe: iFrame.current,
      });
      await emulator.connect();
      await emulator.fs.init({
        "package.json": JSON.stringify({
          name: "my-app",
          scripts: {
            test: "jest",
          },
          dependencies: {
            // jest: "29.5.0",
            "@testing-library/jest-dom": "5.16.5",
          },
        }),
        "test.test.js": `
          import { readFileSync } from "fs";
          import '@testing-library/jest-dom/extend-expect';

          describe('index.html', () => {
            let content;
            beforeEach(() => {
              content = readFileSync("./index.html",'utf8');
              document.documentElement.innerHTML = content;
            });
          
            it('contains h1 tag', () => {
              expect(document.querySelector("h1")).not.toBeNull();
            });

            it('h1 tag has text Murad', () => {
              expect(document.querySelector("h1").innerHTML).toEqual("Murad");
            });
            
            it('has to have a style', () => {

              expect(document.querySelector('h1')).toHaveStyle({
                backgroundColor: 'red',
                fontSize: '16px',
              });
            });

          });`,
        "index.html": `<html>
        <head>
          <title>first</title>
          <style>
            h1 {
              background-color: red;
              font-size: 16px;
            }
          </style>
        </head>
        <body>
          <h1>Murad</h1>
        </body>
        </html>`,
      });
      const shell = emulator.shell.create();
      shell.on("progress", (status) => console.log(status));
      shell.stderr.on("data", (data) => {
        console.log("Error:", data);
      });
      shell.stdout.on("data", (data) => {
        console.log("Output:", data);
      });
      shell.on("exit", (status) => console.log(status));
      const serverCommand = await shell.runCommand("npm", ["run", "test"]);
      console.log(serverCommand);
    }
  };

  useEffect(() => {
    startEmulator();
  }, []);

  return (
    <Box>
      <iframe ref={iFrame}></iframe>
    </Box>
  );
};

export default TestRunner;

and log:
image
basicaly it downloads the packages and quits

s4847043 commented

any comments?

Marius-Adam commented

Did you manage to fix it? Currently facing similar issue

qargali commented

Unfortunately no. I used webcontainer by stackblitz. repo: https://github.com/stackblitz/webcontainer-core

  • 👍1
DeMoorJasper commented

Please discuss using webcontainers for jest in the webcontainers repo, this isn't really the place to do that