@nightwatch/svelte

Official Nightwatch plugin which adds component testing support for Svelte apps. It uses the Vite dev server under the hood and vite-plugin-nightwatch. Requires Nightwatch 3.0.1+

npm install @nightwatch/svelte

Usage:

Update your Nightwatch configuration and add the plugin to the list:

module.exports = {
  plugins: ['@nightwatch/svelte']
  
  // other nightwatch settings...
}

Already using Vite in your project?

If you already have a Vite project, then the @nightwatch/svelte plugin will try to use the existing vite.config.js or vite.config.ts, if either one is found.

Check the vite-plugin-nightwatch project for more configuration options.

Update the vite.config.js and add the vite-plugin-nightwatch plugin:

// vite.config.js

import nightwatchPlugin from 'vite-plugin-nightwatch'

export default {
  plugins: [
    // ... other plugins, such as svelte()
    nightwatchPlugin()
  ]
})

Configuration

We’ve designed the @nightwatch/svelte plugin to work with sensible configuration defaults, but in some more advanced scenarios you may need to change some of the config options.

Vite dev server

By default, Nightwatch will attempt to start the Vite dev server automatically. You can disable that by adding the below in your nightwatch.conf.js file, under the vite_dev_server dictionary.

This is common to other component testing plugins that are based on Vite, such as the @nightwatch/react plugin.

// nightwatch.conf.js

module.exports = {
  plugins: ['@nightwatch/svelte'],
  vite_dev_server: {
    start_vite: true,
    port: 5173
  }
}

Plugin options

The plugin accepts a few config options which can be set when working with an existing vite.config.js file in the project.

- renderPage

Specify the path to a custom test renderer to be used. A default renderer is included in the package, but this option can overwrite that value.

// vite.config.js

export default {
  plugins: [
    // ... other plugins, such as svelte() or vue()
    nightwatchPlugin({
      renderPage: './src/test_renderer.html'
    })
  ]
}

API Commands:

This plugin includes a few Nightwatch commands which can be used while writing Svelte component tests.

- browser.mountComponent(componentPath, [options], [callback]):

Parameters:

• componentPath – location of the component file (.jsx) to be mounted
• options – this can include:
  • props - properties to be passed to the Svelte component, this will be serialized to JSON
  • mocks: this can be a list of url calls that can be mocked (will be passed to sinon automatically); at the moment only Fetch API calls can be mocked, but XHR support will be added soon.
• callback – an optional callback function which will be called with the component element

Example:

const component = await browser.mountComponent('/src/components/Form.svelte')

const component = await browser.mountComponent('/src/components/Welcome.svelte', {
  props: {
    username: 'John Doe'
  }
})

const component = await browser.mountComponent('/src/components/Form.svelte', {
  mocks: {
    '/api/get-user': {
      type: 'fetch',
        body: {
        data: {
          "firstName": "Jimmy",
          "lastName": "Hendrix"
        }
      }
    }
  }
})

Debugging Component Tests

Debugging component tests in Nightwatch isn't as straightforward as debugging a regular Node.js application or service, since Nightwatch needs to inject the code to render to component into the browser.

However, since Nightwatch v2.4 we provide several ways to inspect and debug the mounted component using the browser devtools console. Refer to the guide page on our docs website for more details: https://nightwatchjs.org/guide/component-testing/debugging.html

Example:

npx nightwatch test/src/userInfoTest.js --devtools --debug

Run tests:

Tests for this project are written in Nightwatch, so you can inspect them as examples, located in the [tests/src] folder.

Run them with::

npm test 

License

MIT