sonicoder86

it('should modify state', () => {
  const { store, onModify } = createStore();
  let info;
  store.subscribe(value => info = value);

  onModify('Modified by click');

  expect(info).toEqual('Modified by click');
});

sonicoder86

import { writable } from 'svelte/store';

export const createStore = () => {
  const state = writable('Click to modify');

  return {
    state,
    onModify(value) {
      state.update(() => value);
    }

sonicoder86

it('should handle interactions', async () => {
  let info = 'Click to modify';
  const { getByTestId, component } = render(Footer, { info });

  component.$on('modify', event => info = event.detail);

  const button = getByTestId('button');
  await fireEvent.click(button);

  expect(info).toEqual('Modified by click');

sonicoder86

<script>
  import { createEventDispatcher } from 'svelte';

  export let info;
  const dispatch = createEventDispatcher();
  const modify = () => dispatch('modify', 'Modified by click');
</script>

<div>
  <p class="info" data-testid="info">{info}</p>

sonicoder86

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

it('should modify the text after clicking the button', async () => {
  const { getByTestId } = render(Footer);

  const button = getByTestId('button');
  await fireEvent.click(button);
  const info = getByTestId('info');

  expect(info).toHaveTextContent('Modified by click');

sonicoder86

import { render } from '@testing-library/svelte';
import Footer from './Footer.svelte';

describe('Footer', () => {
  it('should render component', () => {
    const { getByTestId } = render(Footer);

    const element = getByTestId('info');

    expect(element).toHaveTextContent('Click to modify');

sonicoder86

<script>
  let info = 'Click to modify';
  const modify = () => info = 'Modified by click';
</script>

<div>
  <p class="info" data-testid="info">{info}</p>
  <button on:click={modify} data-testid="button">Modify</button>
</div>

sonicoder86

describe('toUpperCase', () => {
  it('should convert string to upper case', () => {
    // Arrange
    const toUpperCase = info => info.toUpperCase();

    // Act
    const result = toUpperCase('Click to modify');

    // Assert
    expect(result).toEqual('CLICK TO MODIFY');

sonicoder86

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

sonicoder86

import { reactive, readonly } from 'vue';

export const createStore = () => {
  const state = reactive({ counter: 0 });
  const increment = () => state.counter++;

  return { increment, state: readonly(state) };
}