svelte-jester VS jest-dom

svelte-jester: precompiles Svelte components before tests.

I’m using jest with svelte-jester and @testing-library/svelte.

While I mentioned in the beginning of the article that I am relatively happy with the current state of my reference TypeScript monorepo template, I still think there are a couple of things that can be improved. Chiefly I think that Yarn 2 (‘Berry’) is still not as mature as I would like it to be. Support for ESM for instance would be awesome, the lack of which caused me some problems in trying to make Svelte work within the monorepo. However, I think it is very worthwhile what the Yarn team attempts to achieve with Yarn 2 and I am happy to support it by trying to make it work in the monorepo template.

I need to test some components that require svelte-spa-router by using jest. Well the problem is, an import from svelte-spa-router causes the error on my previous successful tests. Came across this kind of issue on github https://github.com/mihar-22/svelte-jester/issues/7 and try to replicate the solution like this.

Tests structure Queries Roles User events Matchers Jest Matchers testing-library Mock functions

//config/jest/setupTests.ts // jest-dom adds custom jest matchers for asserting on DOM nodes. // allows you to do things like: // expect(element).toHaveTextContent(/react/i) // learn more: https://github.com/testing-library/jest-dom import '@testing-library/jest-dom';

Update: Just got it working. Following the instructions on this github issue and using `shamefully-hoist=true` with pnpm I got it working. The issue I was facing was with pnpm.

React Testing Library uses jest-dom which has a .getByText() matcher.

vitest-dom extends the standard Jest matchers with convenient methods like .toBeDisabled. Now you can write tests that assert on the state of the DOM. The package is a fork of @testing-library/jest-dom.

jest-dom matchers

At the time of writing this article, it still seems to be an open issue. However, a workaround I found is to add "skipLibCheck": true, to your tsconfig.json file.

// jest-dom adds custom jest matchers for asserting on DOM nodes. // allows you to do things like: // expect(element).toHaveTextContent(/react/i) // learn more: https://github.com/testing-library/jest-dom import '@testing-library/jest-dom'; import { server } from './mocks/server'; beforeAll( () => server.listen( { onUnhandledRequest: 'error' } ) ); afterEach( () => server.resetHandlers() ); afterAll( () => server.close() );

Everything you want to do to your test environment such as extends the jest matchers with @testing-library/jest-dom, mock some APIs that’s not implemented in jdom, you can put to config/jest/setupTests.js: