Unexpected token in testing render method - SolidJS

Alex Lohr

A

Alex Lohr•6/18/23, 2:41 PM

render expects a function as its first argument.

Alex Lohr

A

Alex Lohr•6/18/23, 2:41 PM

If you used typescript, you would have gotten a type warning.

Alex Lohr

A

Alex Lohr•6/18/23, 2:45 PM

So you need to use .

Tur

T

TurOP•6/18/23, 2:51 PM

It did't solve the problem. But what really hellps is the changing of the test file extension from .js to .jsx.

2023-06-18_17.48.42.png

Tur

T

TurOP•6/18/23, 2:51 PM

Have no idea why ...

Tur

T

TurOP•6/18/23, 2:53 PM

By the way , I use js, not typescript

Tur

T

TurOP•6/18/23, 2:57 PM

And now I have this

2023-06-18_17.56.22.png

Alex Lohr

A

Alex Lohr•6/18/23, 2:57 PM

Using the function instead of the component should solve at least one part of the problem. I am the maintainer of our testing-library.

Alex Lohr

A

Alex Lohr•6/18/23, 2:59 PM

Maybe you need to inside an async testing function instead.

Alex Lohr

A

Alex Lohr•6/18/23, 3:00 PM

But usually, rendering is pretty instant.

Alex Lohr

A

Alex Lohr•6/18/23, 3:00 PM

Unless you have a Suspense or Show in there somewhere.

Alex Lohr

A

Alex Lohr•6/18/23, 3:01 PM

Can you show me the AdminUserChange component?

Alex Lohr

A

Alex Lohr•6/18/23, 3:02 PM

Or wait, maybe it finds more than one button.

Tur

T

TurOP•6/18/23, 3:02 PM

Yep it has 2

Alex Lohr

A

Alex Lohr•6/18/23, 3:02 PM

In which case, you should probably use and use that instead of screen.

Alex Lohr

A

Alex Lohr•6/18/23, 3:03 PM

or if they have different text, use .

Alex Lohr

A

Alex Lohr•6/18/23, 3:04 PM

Exchange Update for whatever text you are expecting.

Tur

T

TurOP•6/18/23, 3:06 PM

not working

Tur

T

TurOP•6/18/23, 3:07 PM

Stilll throws

Alex Lohr

A

Alex Lohr•6/18/23, 3:08 PM

Then you are using node 20

Tur

T

TurOP•6/18/23, 3:09 PM

Yep I have just updated because of another problem

Alex Lohr

A

Alex Lohr•6/18/23, 3:09 PM

There are three workarounds for a change in node's module resolution that breaks vitest.

Alex Lohr

A

Alex Lohr•6/18/23, 3:10 PM

Inline all /solid-js/ deps,
resolve.alias-es for all solid imports,
downgrade node to 18+.

Tur

T

TurOP•6/18/23, 3:10 PM

2023-06-18_18.09.54.png

Alex Lohr

A

Alex Lohr•6/18/23, 3:10 PM

#1 is recommended.

Alex Lohr

A

Alex Lohr•6/18/23, 3:11 PM

I have already informed the vitest team of the issue, a later version should fix it so that the workaround can be removed.

Tur

T

TurOP•6/18/23, 3:12 PM

I got this nasty problem so I tried to solve it by upgrading node to 20.

Alex Lohr

A

Alex Lohr•6/18/23, 3:12 PM

In your vite(st) config, you need something like .

Alex Lohr

A

Alex Lohr•6/18/23, 3:13 PM

IIRC, at least. I'm currently on my cellphone.

Alex Lohr

A

Alex Lohr•6/18/23, 3:14 PM

It should be correct, though: https://github.com/solidjs/solid-testing-library/issues/38#issuecomment-1564593881

GitHub

[test:vitest-run] TypeError: unmount is not a function · Issue #38 ...

All of a sudden, I started to get for tests like

Tur

T

TurOP•6/18/23, 3:14 PM

That's my config

Alex Lohr

A

Alex Lohr•6/18/23, 3:15 PM

Just add the deps part to test.

Tur

T

TurOP•6/18/23, 3:23 PM

I worked out! But there is another problem:(

2023-06-18_18.22.17.png

Tur

T

TurOP•6/18/23, 3:25 PM

Why did it decided I have 2 instaces of solid and how to tell it that my App is actually wrapped by Router?

Tur

T

TurOP•6/18/23, 3:28 PM

Alex Lohr

A

Alex Lohr•6/18/23, 3:34 PM

Ah, you probably need to include to the inlined deps as well.

Tur

T

TurOP•6/18/23, 3:39 PM

Like this? It's not working

Tur

T

TurOP•6/18/23, 3:43 PM

Wait

Tur

T

TurOP•6/18/23, 3:43 PM

It solved the problem with multiple instances of solid!

Tur

T

TurOP•6/18/23, 3:45 PM

But there is still the problem with Wrapping up the App with Router

Tur

T

TurOP•6/18/23, 4:11 PM

Thank you! It works!

Alex Lohr

A

Alex Lohr•6/18/23, 4:31 PM

Happy to help. I hope your experience testing solid code is now smoother.

Tur

T

TurOP•6/18/23, 4:38 PM

I'm a beginer in frontend testing so smoother is still not my case

But I'm keen on TDD and love testing backend in Python. I hope I manage to include TDD approach to my Solid js projects/

Alex Lohr

A

Alex Lohr•6/18/23, 4:43 PM

Good luck, then!

describe('<AdminUserChange />', () => {
  it('renders without crashing', () => {
    render(() => <AdminUserChange />);
    const updateBtn = screen.getByRole('button', { name: 'Update' });
    // const input = screen.getByName('phone_number');
    // expect(input).toBeInTheDocument();
    expect(updateBtn).toBeInTheDocument();
  });
});

describe('<AdminUserChange />', () => {
  it('renders without crashing', () => {
    render(() => <AdminUserChange />);
    const updateBtn = screen.getByRole('button', { name: 'Update' });
    // const input = screen.getByName('phone_number');
    // expect(input).toBeInTheDocument();
    expect(updateBtn).toBeInTheDocument();
  });
});

//<reference types="vitest" />
/// <reference types="vite/client" />
// 👆 do not forget to add the references above

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
import devtools from 'solid-devtools/vite';
import eslintPlugin from 'vite-plugin-eslint';

export default defineConfig({
  plugins: [devtools(), solidPlugin(), eslintPlugin()],
  server: {
    port: 3000,
  },
  build: {
    target: 'esnext',
  },
  test: {
    environment: 'jsdom',
    globals: true,
    transformMode: { web: [/\.[jt]sx?$/] },
  },
  envDir: '.envs',
  envPrefix: 'HIN_',
});

//<reference types="vitest" />
/// <reference types="vite/client" />
// 👆 do not forget to add the references above

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
import devtools from 'solid-devtools/vite';
import eslintPlugin from 'vite-plugin-eslint';

export default defineConfig({
  plugins: [devtools(), solidPlugin(), eslintPlugin()],
  server: {
    port: 3000,
  },
  build: {
    target: 'esnext',
  },
  test: {
    environment: 'jsdom',
    globals: true,
    transformMode: { web: [/\.[jt]sx?$/] },
  },
  envDir: '.envs',
  envPrefix: 'HIN_',
});

/* @refresh reload */
// eslint-disable-next-line import/named
import { render } from 'solid-js/web';
// import 'material-icons/iconfont/material-icons.css';
import 'solid-devtools';
import { Router } from '@solidjs/router';

import './index.css';
import App from './App';

render(
  () => (
    <Router>
      <App />
    </Router>
  ),
  document.getElementById('root'),
);

/* @refresh reload */
// eslint-disable-next-line import/named
import { render } from 'solid-js/web';
// import 'material-icons/iconfont/material-icons.css';
import 'solid-devtools';
import { Router } from '@solidjs/router';

import './index.css';
import App from './App';

render(
  () => (
    <Router>
      <App />
    </Router>
  ),
  document.getElementById('root'),
);

///<reference types="vitest" />
/// <reference types="vite/client" />
// 👆 do not forget to add the references above

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
import devtools from 'solid-devtools/vite';
import eslintPlugin from 'vite-plugin-eslint';

export default defineConfig({
  plugins: [devtools(), solidPlugin(), eslintPlugin()],
  server: {
    port: 3000,
  },
  build: {
    target: 'esnext',
  },
  test: {
    environment: 'jsdom',
    globals: true,
    transformMode: { web: [/\.[jt]sx?$/] },
    deps: {
      inline: [/solid-js/, /@solidjs/],
    },
  },
  envDir: '.envs',
  envPrefix: 'HIN_',
});

///<reference types="vitest" />
/// <reference types="vite/client" />
// 👆 do not forget to add the references above

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
import devtools from 'solid-devtools/vite';
import eslintPlugin from 'vite-plugin-eslint';

export default defineConfig({
  plugins: [devtools(), solidPlugin(), eslintPlugin()],
  server: {
    port: 3000,
  },
  build: {
    target: 'esnext',
  },
  test: {
    environment: 'jsdom',
    globals: true,
    transformMode: { web: [/\.[jt]sx?$/] },
    deps: {
      inline: [/solid-js/, /@solidjs/],
    },
  },
  envDir: '.envs',
  envPrefix: 'HIN_',
});