S
SolidJS•2y ago
Tur

Unexpected token in testing render method

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.
25 Replies
Alex Lohr
Alex Lohr•2y ago
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 />).
Tur
TurOP•2y ago
It did't solve the problem. But what really hellps is the changing of the test file extension from .js to .jsx.
Tur
TurOP•2y ago
Have no idea why ... By the way , I use js, not typescript
Tur
TurOP•2y ago
And now I have this
Alex Lohr
Alex Lohr•2y ago
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.
Tur
TurOP•2y ago
Yep it has 2
Alex Lohr
Alex Lohr•2y ago
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.
Tur
TurOP•2y ago
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();
  });
});
not working Stilll throws 
dispose() is not a function
dispose() is not a function
Alex Lohr
Alex Lohr•2y ago
Then you are using node 20
Tur
TurOP•2y ago
Yep I have just updated because of another problem
Alex Lohr
Alex Lohr•2y ago
There are three workarounds for a change in node's module resolution that breaks vitest. 1. Inline all /solid-js/ deps, 2. resolve.alias-es for all solid imports, 3. downgrade node to 18+.
Tur
TurOP•2y ago
Alex Lohr
Alex Lohr•2y ago
#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.
Tur
TurOP•2y ago
I got this nasty problem so I tried to solve it by upgrading node to 20.
Alex Lohr
Alex Lohr•2y ago
In your vite(st) config, you need something like test: { ..., deps: { inline: [/solid-js/] } },. IIRC, at least. I'm currently on my cellphone.
Alex Lohr
Alex Lohr•2y ago
Tur
TurOP•2y ago
//<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_',
});
//<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
Alex Lohr
Alex Lohr•2y ago
Just add the deps part to test.
Tur
TurOP•2y ago
I worked out! But there is another problem:(
Tur
TurOP•2y ago
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'),
);
/* @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'),
);
Alex Lohr
Alex Lohr•2y ago
Ah, you probably need to include /@solidjs/ to the inlined deps as well.
Tur
TurOP•2y ago
///<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_',
});
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 Thank you! It works!
Alex Lohr
Alex Lohr•2y ago
Happy to help. I hope your experience testing solid code is now smoother.
Tur
TurOP•2y ago
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
Alex Lohr•2y ago
Good luck, then! 🍀
Want results from more Discord servers?
Add your server