SolidJS•13mo ago

Running tests in docker fails, but works outside of docker

I am attempting to set up a Docker development environment for a SolidJS application using Docker Compose. When I access the webpage via localhost:3000, the application renders without issues. However, when I attempt to run npm test using vitest inside the Docker container, I run into a problem. The issue appears to be with the render function, as it does not seem to render the application correctly within the Docker container. The debug output only shows <body><div /><body>. Interestingly, when I run npm test outside the Docker container on my local machine, the test passes just fine and the debug correctly renders the application. Here's the relevant code from my test file: My test file:

import { render } from "@solidjs/testing-library";
import App from "../src/App";
import { describe, expect, it } from "vitest";
import "@testing-library/jest-dom"; // 👈 this is imported in order to use the jest-dom matchers

describe("App", () => {
  it("should render the app", () => {
    const { getByText, debug } = render(() => <App />);
    debug();
    expect(getByText("MagicDoor.com")).toBeInTheDocument();
  });
});

import { render } from "@solidjs/testing-library";
import App from "../src/App";
import { describe, expect, it } from "vitest";
import "@testing-library/jest-dom"; // 👈 this is imported in order to use the jest-dom matchers

describe("App", () => {
  it("should render the app", () => {
    const { getByText, debug } = render(() => <App />);
    debug();
    expect(getByText("MagicDoor.com")).toBeInTheDocument();
  });
});

The App.tsx file:

import type { Component } from "solid-js";

import logo from "./assets/magicaldoor.png";

const App: Component = () => {
  return (
    <div class="text-center">
      <header class="bg-gray-800 min-h-screen flex flex-col items-center justify-center text-white text-3xl">
        <img src={logo} class="animate-spin h-[40vmin] pointer-events-none" alt="logo" />
        <span>MagicDoor.com</span>
      </header>
    </div>
  );
};

export default App;

import type { Component } from "solid-js";

import logo from "./assets/magicaldoor.png";

const App: Component = () => {
  return (
    <div class="text-center">
      <header class="bg-gray-800 min-h-screen flex flex-col items-center justify-center text-white text-3xl">
        <img src={logo} class="animate-spin h-[40vmin] pointer-events-none" alt="logo" />
        <span>MagicDoor.com</span>
      </header>
    </div>
  );
};

export default App;

The npm test output

/app # npm test

> vite-template-solid@0.0.0 test
> vitest


 DEV  v0.31.1 /app

stdout | tests/App.test.tsx > App > should render the app
<body>
  <div />
</body>

 ❯ tests/App.test.tsx (1)
   ❯ App (1)
     × should render the app
       ⠸ [ afterEach ]

Failed Tests 1 

 FAIL  tests/App.test.tsx > App > should render the app
TestingLibraryElementError: Unable to find an element with the text: MagicDoor.com. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
<div />
 ❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
 ❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38
 ❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
 ❯ getByText node_modules/@testing-library/dom/dist/query-helpers.js:95:19
 ❯ tests/App.test.tsx:10:12
      8|     const { getByText, debug } = render(() => <App />);
      9|     debug();
     10|     expect(getByText("MagicDoor.com")).toBeInTheDocument();
       |            ^
     11|   });
     12| });

[1/2]⎯

 FAIL  tests/App.test.tsx > App > should render the app
TypeError: dispose is not a function
 ❯ cleanupAtContainer node_modules/@solidjs/testing-library/dist/index.js:96:3
     94| function cleanupAtContainer(ref) {
     95|   const { container, dispose } = ref;
     96|   dispose();
       |   ^
     97|   if (container?.parentNode === document.body) {
     98|     document.body.removeChild(container);
 ❯ cleanup node_modules/@solidjs/testing-library/dist/index.js:103:21
 ❯ node_modules/@solidjs/testing-library/dist/index.js:17:13

/app # npm test

> vite-template-solid@0.0.0 test
> vitest


 DEV  v0.31.1 /app

stdout | tests/App.test.tsx > App > should render the app
<body>
  <div />
</body>

 ❯ tests/App.test.tsx (1)
   ❯ App (1)
     × should render the app
       ⠸ [ afterEach ]

Failed Tests 1 

 FAIL  tests/App.test.tsx > App > should render the app
TestingLibraryElementError: Unable to find an element with the text: MagicDoor.com. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
<div />
 ❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
 ❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38
 ❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
 ❯ getByText node_modules/@testing-library/dom/dist/query-helpers.js:95:19
 ❯ tests/App.test.tsx:10:12
      8|     const { getByText, debug } = render(() => <App />);
      9|     debug();
     10|     expect(getByText("MagicDoor.com")).toBeInTheDocument();
       |            ^
     11|   });
     12| });

[1/2]⎯

 FAIL  tests/App.test.tsx > App > should render the app
TypeError: dispose is not a function
 ❯ cleanupAtContainer node_modules/@solidjs/testing-library/dist/index.js:96:3
     94| function cleanupAtContainer(ref) {
     95|   const { container, dispose } = ref;
     96|   dispose();
       |   ^
     97|   if (container?.parentNode === document.body) {
     98|     document.body.removeChild(container);
 ❯ cleanup node_modules/@solidjs/testing-library/dist/index.js:103:21
 ❯ node_modules/@solidjs/testing-library/dist/index.js:17:13

My docker files:

# pull official base image
FROM node:20.2-alpine3.16
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000

# pull official base image
FROM node:20.2-alpine3.16
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000

2 Replies

Kasper•13mo ago

Compose file:

version: "3.8"
services:
  magicdoor-portal-frontend:
    build:
      context: .
      dockerfile: ./.docker/dev/Dockerfile
    volumes:
      - .:/app
      - /app/node_modules
    ports:
      - 3000:3000
    environment:
      - CHOKIDAR_USEPOLLING=true
    command: ["npm", "run", "start", "--", "--host", "0.0.0.0"]

  magicdoor-portal-frontend-tests:
    build:
      context: .
      dockerfile: ./.docker/dev/Dockerfile
    volumes:
      - .:/app
      - /app/node_modules
    ports:
      - 4000:3000
    environment:
      - CHOKIDAR_USEPOLLING=true
    command: ["npm", "run", "test"]

version: "3.8"
services:
  magicdoor-portal-frontend:
    build:
      context: .
      dockerfile: ./.docker/dev/Dockerfile
    volumes:
      - .:/app
      - /app/node_modules
    ports:
      - 3000:3000
    environment:
      - CHOKIDAR_USEPOLLING=true
    command: ["npm", "run", "start", "--", "--host", "0.0.0.0"]

  magicdoor-portal-frontend-tests:
    build:
      context: .
      dockerfile: ./.docker/dev/Dockerfile
    volumes:
      - .:/app
      - /app/node_modules
    ports:
      - 4000:3000
    environment:
      - CHOKIDAR_USEPOLLING=true
    command: ["npm", "run", "test"]

Downgrading to node:18.9-alpine3.16 solved the issues.

Alex Lohr•13mo ago

It seems there are issues with node-20 + solid-js + vitest. I'm already investigating the issue. It works if you inline /solid-js/ in the vite(st) config. The vite loader might be broken by node-20.

Gaming

Programming

Running tests in docker fails, but works outside of docker