Code execution order isn't clear to me

[matheus-hatzlhoffer]

Hello everyone,

I am doing some simple tests with javascript vanilla, vite and vitest. I create the project with npm create vite@latest vitest with vanilla js flavor.

I changed the main.js to export a function to render the page:

import "./style.css";
import javascriptLogo from "./javascript.svg";
import viteLogo from "/vite.svg";
import { setupCounter } from "./counter.js";

export const render = () => {
  document.querySelector("#app").innerHTML = `
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="${viteLogo}" class="logo" alt="Vite logo" />
    </a>
    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
      <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
    </a>
    <h1>Hello Vite!</h1>
    <div class="card">
      <button id="counter" type="button"></button>
    </div>
    <p class="read-the-docs">
      Click on the Vite logo to learn more
    </p>
  </div>
`;
    setupCounter(document.querySelector("#counter"));
  }
};

render();

After that I created a main.test.js

import { describe, it, expect, beforeEach } from "vitest";
import { render } from "../main.js";

describe("render", () => {
  beforeEach(() => {
    document.body.innerHTML = '<div id="app"></div>';
  });

  it("should initialize the counter button", () => {
    render();

    const counterButton = document.querySelector("#counter");
    expect(counterButton.innerHTML).toBe("count is 0");

    counterButton.click();
    expect(counterButton.innerHTML).toBe("count is 1");

    counterButton.click();
    expect(counterButton.innerHTML).toBe("count is 2");
  });
});

Even though I have a beforeEach() to set up the document I was receiving this error

TypeError: Cannot set properties of null (setting 'innerHTML')"

The error happens because the render function runs before the beforeEach function and I don't understand why this behavior happen. Does anyone knows what is happening and can explain?

To workaround this error I added an if statement, but I really don't understand this behavior

My vitest and vite versions:

vite: 5.4.1
vitest 2.0.5

vite.config.js:

/// <reference types="vitest" />
import { defineConfig } from "vite";

export default defineConfig({
  test: {
    coverage: {
      reporter: ["text", "lcov"],
    },
    environment: "jsdom",
  },
});

```

[hi-ogawa]

If you're wondering why render is executed when importing main.js:

// main.js
export const render = () => { ... };
render();

then that's just how javascript works.