Unexpected token in testing render method | SolidJS | Page 1

rigid flume Jun 18, 2023, 2:14 PM

#

Hello, I'm just trying to test something and experienced with this problem. I follow the guide from https://docs.solidjs.com/guides/how-to-guides/testing-in-solid/vitest#creating-tests
I can't get why that problem happens.

molten fiber Jun 18, 2023, 2:41 PM

#

render expects a function as its first argument.

#

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

#

So you need to use render(() => <AdminUserChange />).

rigid flume Jun 18, 2023, 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.

#

Have no idea why ...

#

By the way , I use js, not typescript

#

And now I have this

molten fiber Jun 18, 2023, 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.

#

Maybe you need to await screen.findByRole('button') inside an async testing function instead.

#

But usually, rendering is pretty instant.

#

Unless you have a Suspense or Show in there somewhere.

#

Can you show me the AdminUserChange component?

#

Or wait, maybe it finds more than one button.

rigid flume Jun 18, 2023, 3:02 PM

#

Yep it has 2

molten fiber Jun 18, 2023, 3:02 PM

#

In which case, you should probably use const { getByRole } = render(...) and use that instead of screen.

#

or if they have different text, use screen.getByRole('button', { name: 'Update' }).

#

Exchange Update for whatever text you are expecting.

rigid flume Jun 18, 2023, 3:06 PM

#

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();
  });
});

not working

#

Stilll throws
dispose() is not a function

molten fiber Jun 18, 2023, 3:08 PM

#

Then you are using node 20

rigid flume Jun 18, 2023, 3:09 PM

#

Yep I have just updated because of another problem

molten fiber Jun 18, 2023, 3:09 PM

#

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

#

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

rigid flume Jun 18, 2023, 3:10 PM

#

molten fiber Jun 18, 2023, 3:10 PM

#

#1 is recommended.

#

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

rigid flume Jun 18, 2023, 3:12 PM

#

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

molten fiber Jun 18, 2023, 3:12 PM

#

In your vite(st) config, you need something like test: { ..., deps: { inline: [/solid-js/] } },.

#

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

#

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

rigid flume Jun 18, 2023, 3:14 PM

#

//<reference types="vitest" />
/// <reference types="vite/client" />
// :point_up_2: 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_',
});

That's my config

molten fiber Jun 18, 2023, 3:15 PM

#

Just add the deps part to test.

rigid flume Jun 18, 2023, 3:23 PM

#

I worked out! But there is another problem:(

#

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

#

/* @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'),
);

molten fiber Jun 18, 2023, 3:34 PM

#

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

rigid flume Jun 18, 2023, 3:39 PM

#

///<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_',
});

Like this? It's not working

#

Wait

#

It solved the problem with multiple instances of solid!

#

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

rigid flume Jun 18, 2023, 4:11 PM

#

Thank you! It works!

molten fiber Jun 18, 2023, 4:31 PM

#

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

rigid flume Jun 18, 2023, 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/

#Unexpected token in testing render method