notice_notification.js

import $ from 'jquery'
import onmount from 'onmount'

/*
 * Simple behavior to show a toast notification
 * (simplified for the sake of illustration)
 */

onmount('[data-js-notice-notification]', function () {
  const $this = $(this)

  const $toast = $('<div id="toast-container">')
    .html($this.data('message'))

  $('body').append($toast)
})

notice_notification.test.js

import $ from 'jquery'
import onmount from 'onmount'
import '../notice_notification'

let $div

beforeEach(() => {
  $div = $('<div>').appendTo('body')
})

afterEach(() => {
  $div.remove()
  onmount()
})

test('data-js-notice-notification', () => {
  // Mock a notice notification
  $('<noscript data-js-notice-notification data-message="Hello" />')
    .appendTo($div)

  // Trigger behaviors
  onmount()

  // Assert that #toast-container is created
  const $toast = $('#toast-container')
  expect($toast[0].outerHTML).toMatchSnapshot()
})