Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
public
src
test
.babelrc.js
.gitignore
README.md
jest.config.js
package-lock.json
package.json
rollup.config.js
yarn.lock

README.md

Jest

Testing svelte components with Jest requires a little setuo but is relatively straighforward. We will walk through the steps here.

Basic Setup

First we need to install jest and svelte-test in order to transform Svelte components as we import them.

With npm:

npm install --save-dev jest svelte-test

Or with yarn:

yarn add --dev jest svelte-test

Now we just need to make sure Svelte components are transformed into valid javascript when they are imported.

Create a jest.config.js file in the root of your application and add the following:

// jest.config.js

module.exports = {
  transform: {
    '^.+\\.svelte$': 'svelte-test/transform',
  },
};

*You can pass additional options to svelte-test/transform, see the [svelte-test readme] for more details

To run our tests we will need to add a test script to package.json like so:

// package.json

{
  // ...otherConfig,
  "scripts": {
    // ...otherScripts
    "test": "jest"
  }
}

You can now import Svelte components and they will be compiled as they are imported, the component constructor will be on the default property of the imported object.

const App = require('./App.svelte');

test('a test', () => {
  const app = new App.default({ options });

  expect(app).toBeTruthy();
});

Using babel

You may want to import components into your tests using esm syntax (import x from './y') and perhaps make use of ptehr language fetaures not fully supported in a node environment. To do this we will add a babel transform to make sure our code can run properly in node.

We will need babel-jest, @babel/core, and @babel/preset-env. We will also add @babel/plugin-transform-runtime to make sure we can use async/await syntax in our tests.

With npm:

npm install --save-dev babel-jest @babel/core @babel/preset-env @babel/plugin-transform-runtime

Or with yarn:

yarn add --dev babel-jest @babel/core @babel/preset-env @babel/plugin-transform-runtime

We will need a babel.config.js in the the root of our project that looks like this:

// babel.config.js

module.exports = function(api) {
  api.cache(true);

  return {
    presets: ['@babel/preset-env'],
    plugins: ['@babel/plugin-transform-runtime'],
  };
};

And we will need to add another transform to our jest.config.js, this time for javascript files:

module.exports = {
  transform: {
    '^.+\\.svelte$': 'svelte-test/transform',
+   '^.+\\.js$': 'babel-jest',
  },
};

Now we should be able to write code similar to that in your components:

import App from './App.svelte';

test('a test', () => {
  const app = new App.default({ options });

  expect(app).toBeTruthy();
});

Adding some DOM helpers

DOM testing can get pretty tedious if you need to mount and destroy your components manually, not to mention querying the DOM and firing events to make assertions. Needing to access the default property of the import everytime might also get annoying.

To ease this pain install @testing-library/svelte.

With npm:

npm install --save-dev @testing-library/svelte

Or with yarn:

yarn add --dev @testing-library/svelte

Now we can use testing-library helpers to make testing the DOM a little simpler:

import { render, fireEvent, cleanup } from '@testing-library/svelte';
import App from './App.svelte';

beforeEach(cleanup);

test('A DOM test', async () => {
  const { getByLabelText, getByText } = render(App, {
    props: { name: 'World' },
  });

  const button = getByLabelText('Submit');
  await fireEvent.click(button);

  expect(() => getByText('Hello Jeremiah')).not.toThrow();
});

You can find out more about these DOM helpers in the testing-library documentation.

You can’t perform that action at this time.