DEV Community: Basar Buyukkahraman

Test Driven Development with Vue

Basar Buyukkahraman — Mon, 27 Dec 2021 10:27:04 +0000

In this article lets see how we can apply test driven development in a vue project.

Setup

First lets create the project. I'm using @vue/cli for it.

npm install -g @vue/cli
# OR
yarn global add @vue/cli

then you can run

vue create my-app

It will ask which preset you want. You can go with the default, which is for vue 2 or you can select vue 3.

after project is created we will install additional dependencies for testing.

npm i -D jest @testing-library/vue @testing-library/jest-dom @testing-library/user-event babel-jest @vue/vue2-jest

for vue 3 run npm i -D jest @testing-library/vue@next @testing-library/jest-dom @testing-library/user-event babel-jest @vue/vue3-jest

We are using
jest* as the test runner which also has the assertion and mocking functionalities.
We also have dependencies

@testing-library/vue is for rendering the components in our test functions.
@testing-library/jest-dom is for dom releated matchers for jest
@testing-library/user-event is for making user actions on components, like clicking, typing, focusing etc

We will configure jest. We do this configuration in package.json

// package.json
  "jest": {
      // this is for making sure jest to re run the tests when the files with this extension updated
    "moduleFileExtensions": [
      "js",
      "vue"
    ],
    "transform": {
      ".*\\.(vue)$": "@vue/vue2-jest", // for vue3 project @vue/vue3-jest
      ".*\\.(js)$": "babel-jest"
    },
    // and we need to set testEnvironment after jest V27
    "testEnvironment": "jsdom"
  }

and also we add script for running the tests.

// package.json
  "scripts": {
    // add test script
    "test": "jest --watch"
  },

and we are going to use jest functions like describe, it and to not get warning about those from eslint, update eslint configuration in package.json as well

  "eslintConfig": {
    "root": true,
    "env": {
      "node": true,
      // as env, add jest and set it to true
      "jest": true
    },

The setup part is complete now.

Project

Lets have a simple component here. We will have a button in it and whenever we click to that button, it is going to be loading random user from this public api
https://randomuser.me/

First lets have two terminal and run the project npm run serve in one of them and run the tests npm test on another one.

Jest is running in watch mode in our project. And jest watch mode is working based on git status. If there is no changed files, it does not run tests. You can make sure to run all test to run by hitting a in the test terminal.

Now lets add our component RandomUser.vue and corresponding test module RandomUser.spec.js

Jest automatically detects the test modules if the files have the extension *.test.js or *.spec.js.

and lets add our first test

// RandomUser.spec.js
import RandomUser from './RandomUser.vue';
import { render, screen } from '@testing-library/vue';
import "@testing-library/jest-dom";

describe('Random User', () => {
  it('has button to load random user', () => {
    render(RandomUser);
    const loadButton = screen.queryByRole('button', {
      name: 'Load Random User'
    });
    expect(loadButton).toBeInTheDocument();
  });
});

We are rendering the RandomUser component. And then we use screen's functions to query the elements we are looking for. doc

this first test is looking for a button on page. We are using the a11y roles here and as a text, we expect the button to have Load Random User. In the end, we expec this button to be in the document.

As soon as we save this module, jest is running the tests again. It will be ending up with failure.

 FAIL  src/RandomUser.spec.js
  Random User
    × has button to load random user (144 ms)

  ● Random User › has button to load random user

    expect(received).toBeInTheDocument()

    received value must be an HTMLElement or an SVGElement.
    Received has value: null

       9 |       name: 'Load Random User'
      10 |     });
    > 11 |     expect(loadButton).toBeInTheDocument();
         |                        ^
      12 |   });
      13 | });

Now lets fix this

<!-- RandomUser.vue -->
<template>
  <button>Load Random User</button>
</template>

Test is passing now.

Lets show this component in our application.

// main.js

// vue 2
import Vue from 'vue'
import RandomUser from './RandomUser.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(RandomUser),
}).$mount('#app')


// vue 3

import { createApp } from 'vue'
import RandomUser from './RandomUser.vue'

createApp(RandomUser).mount('#app')

Now you must be seeing a button on page.

Now we are going to click to this button and it will be making an api call to randomuser.me
But first lets install a library for this api call.

npm i axios

Make sure you stop and start test and app consoles after installing a new dependency.

Lets use axios for http calls.

We are going to add our test for this requirement. But first lets see the returned object from randomuser api.

{
  "results": [
    {
      "gender": "female",
      "name": {
        "title": "Miss",
        "first": "Jennifer",
        "last": "Alvarez"
      },
      "location": {
        //
      },
      "email": "jennifer.alvarez@example.com",
      "login": {
         //
      },
      "dob": {
        "date": "1954-07-01T18:59:36.451Z",
        "age": 67
      },
      "registered": {
        "date": "2016-11-17T05:48:39.981Z",
        "age": 5
      },
      "phone": "07-9040-0066",
      "cell": "0478-616-061",
      "id": {
        "name": "TFN",
        "value": "531395478"
      },
      "picture": {
        "large": "https://randomuser.me/api/portraits/women/24.jpg",
        "medium": "https://randomuser.me/api/portraits/med/women/24.jpg",
        "thumbnail": "https://randomuser.me/api/portraits/thumb/women/24.jpg"
      },
      "nat": "AU"
    }
  ],
  "info": {
    //
  }
}

so the actual user object is in the results array.
now lets add our test

// we need to import two packages.
// we will mock the
import axios from 'axios';
// and we will use this user-event to click the button.
import userEvent from '@testing-library/user-event';

// this test will be having async/await
it('displays title, first and lastname of loaded user from randomuser.me', async () => {
  render(RandomUser);
  const loadButton = screen.queryByRole('button', {
    name: 'Load Random User'
  });

  // we will click the button but our request must not be going
  // to the real server. we can't be sure how that request
  // ends up. So we will mock it. Lets make sure we set what
  // axios will return. 
  // lets define the mock function first
  // axios get, post ... functions are promise and here
  // we will mock success response by mockResolvedValue
  // and we will return the axios response object.
  // so we put the actual api response into data object here
  const mockApiCall = jest.fn().mockResolvedValue({
    data: {
      results: [
        {
          name: {
            title: 'Miss',
            first: 'Jennifer',
            last: 'Alvarez'
          }
        }
      ]
    }
  });
  // now lets assign this mock function to axios.get
  axios.get = mockApiCall;
  // then we can click the button
  userEvent.click(loadButton);
  // and we expect to see this text on screen.
  // this is dependent onto async operation to complete
  // so to wait that api call to finish, we use this findBy...
  const userInfo = await screen.findByText("Miss Jennifer Alvarez");
  expect(userInfo).toBeInTheDocument();
});

this test fails and you should be seeing a message like this

  ● Random User › displays title, first and lastname of loaded user from randomuser.me

    TestingLibraryElementError: Unable to find an element with the text: Miss Jennifer Alvarez. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

lets fix this.

// RandomUser.vue
<template>
  <div>
    <button @click="loadRandomUser">Load Random User</button>
    <h1 v-if="user">{{user.name.title}} {{user.name.first}} {{user.name.last}}</h1>
  </div>
</template>
<script>
// importing axios, we will make api call
import axios from 'axios';
export default {
// we keep user object in state
  data() {
    return {
      user: undefined
    };
  },
  methods: {
   // and this method will be loading the user from the api
    async loadRandomUser(){
      try {
        const response = await axios.get('https://randomuser.me/api');
        this.user = response.data.results[0];
      } catch (error) {/**/}
    }
  }
};
</script>

after these changes test will pass.

With mocking, we have a predictable behavior in our application. If we test this on browser, we can see in each click, we receive different users.

But the downside of mocking is, now our test is highly coupled with our implementation detail. If we decide to replace axios with fetch, then our test needs to be refactored accordingly.

lets do that.

The fetch is coming with the browser. So to use it in our component we don't need to install anything. But in our test environment, which is running in node, it doesn't have fetch in it. So using fetch in application will cause problem on test part. To resolve this lets install another package. This is only needed for test modules.

npm i -D whatwg-fetch

now lets import this one in our test and re-run tests.

// RandomUser.spec.js
import 'whatwg-fetch';

But other than this import, lets do nothing on test. But lets use fetch in our component.

// RandomUser.vue
  async loadRandomUser(){
    try {
      const response = await fetch('https://randomuser.me/api');
      const body = await response.json();
      this.user = body.results[0];
    } catch (error) {/**/}
  }

after these changes the tests are failing. But if we test this on browser, the user is properly loaded. So form user point of view, there is no difference.
But since our test is coupled with axios usage, it is broken now. We can update our mock functions in test to make our test pass. Or we can resolve it without mocking.

We are going to use the library Mock Service Worker - MSW
Lets install it

npm i -D msw

We are going to use it in our test module.

// RandomUser.spec.js
// lets import these two functions
import { setupServer } from "msw/node";
import { rest } from "msw";

it('displays title, first and lastname of loaded user from randomuser.me', async () => {
// here we will create a server
  const server = setupServer(
    // and this server is going to be processing the GET requests
    rest.get("https://randomuser.me/api", (req, res, ctx) => {
      // and here is the response it is returning back
      return res(ctx.status(200), ctx.json({
        results: [
          {
            name: {
              title: 'Miss',
              first: 'Jennifer',
              last: 'Alvarez'
            }
          }
        ]
      }));
    })
  );
  // then..
  server.listen();
  // so at this step we have a server
  // after this part we don't need to deal with axios or fetch
  // in this test function
  render(RandomUser);
  const loadButton = screen.queryByRole('button', {
    name: 'Load Random User'
  });
  userEvent.click(loadButton);
  const userInfo = await screen.findByText("Miss Jennifer Alvarez");
  expect(userInfo).toBeInTheDocument();
});

after this change, test must be passing.
Now our test is not dependent onto the client we are using. We can go back and use axios again.

// RandomUser.vue
async loadRandomUser(){
  try {
    const response = await axios.get('https://randomuser.me/api')
    user = response.data.results[0];
  } catch (error) {
  }
}

Tests must be passing with this usage too.

The mocking is a very good technique in scenarios where external services are taking place. With mocking we are able to create a reliable test environment. But the down side of it, our tests are being highly coupled with our implementation.
My choice is to avoid mocking if I can. And the msw library is great replacement for backend in client tests.

Resources

Github repo for this project can be found here

basarbk / dev-to-tdd-vue-2

basarbk / dev-to-tdd-vue-3

If you would be interested in a full test driven development course for vue, you can check my course at udemy Vue with Test Driven Development

Test Driven Development with React

Basar Buyukkahraman — Sun, 26 Dec 2021 15:13:53 +0000

In this one lets see how we can apply test driven development in a react project.

Setup

First lets create the project.

npx create-react-app my-app

Create react app is creating the project having necessary dependencies for the testing. We are using
jest* as the test runner which also has the assertion and mocking functionalities.

We also have additional dependencies

@testing-library/react is for rendering the components in our test functions.
@testing-library/jest-dom is for dom releated matchers for jest
@testing-library/user-event is for making user actions on components, like clicking, typing, focusing etc

The project comes with App.test.js module which is a sample to demonstrate how to test a component. It displays how to render a component in a test module, how to query elements in that component and how to do the assertion part.

// App.test.js
import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

There is also setupTest.js in the project. This file is loaded by jest and we can move repeating parts (like importing the common packages for the test modules) from test modules to this one.

Project

Lets have a simple component here. We will have a button in it and whenever we click to that button, it is going to be loading random user from this public api
https://randomuser.me/

First lets have two terminal and run the project npm start in one of them and run the tests npm test on another one.

By default the jest is running in watch mode in our project. And jest watch mode is working based on git status. If there is no changed files, it does not run tests. You can make sure to run all test to run by hitting a in the test terminal. The App.test.js would be run after that and you must be seeing all tests are passing.

 PASS  src/App.test.js
  √ renders learn react link (61 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.407 s
Ran all test suites.

Watch Usage: Press w to show more

Now lets add our component RandomUser.js and corresponding test module RandomUser.spec.js

Jest automatically detects the test modules if the files have the extension *.test.js or *.spec.js.

and lets add our first test

// RandomUser.spec.js
import RandomUser from './RandomUser';
import { render, screen } from '@testing-library/react';

describe('Random User', () => {
  it('has button to load random user', () => {
    render(<RandomUser />);
    const loadButton = screen.queryByRole('button', {
      name: 'Load Random User'
    });
    expect(loadButton).toBeInTheDocument();
  });
});

We are rendering the RandomUser component. And then we use screen's functions to query the elements we are looking for. doc

As soon as we save this module, jest is running the tests again. It will be ending up with failure.

 ● Random User › has button to load random user

    Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

      4 | describe('Random User', () => {
      5 |   it('has button to load random user', () => {
    > 6 |     render(<RandomUser />);
        |     ^
      7 |     const loadButton = screen.queryByRole('button', {
      8 |       name: 'Load Random User'
      9 |     });

The test fails at the render phase, because the RandomUser.js is not actually a react component yet.

Lets create the component.

// RandomUser.js
export default function RandomUser(){
  // lets return button element having the text we are looking for
  return <button>Load Random User</button>;
}

Test is passing now.

Lets show this component in our application.

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
//
import RandomUser from './RandomUser';

ReactDOM.render(
  <React.StrictMode>
// replace <App/> with our component
    <RandomUser />
  </React.StrictMode>,
  document.getElementById('root')
);

Now you must be seeing a button on page.

Now we are going to click to this button and it will be making an api call to randomuser.me
But first lets install a library for this api call.

npm i axios

Make sure you stop and start test and app consoles after installing a new dependency.

Lets use axios for http calls.

We are going to add our test for this requirement. But first lets see the returned object from randomuser api.

{
  "results": [
    {
      "gender": "female",
      "name": {
        "title": "Miss",
        "first": "Jennifer",
        "last": "Alvarez"
      },
      "location": {
        //
      },
      "email": "jennifer.alvarez@example.com",
      "login": {
         //
      },
      "dob": {
        "date": "1954-07-01T18:59:36.451Z",
        "age": 67
      },
      "registered": {
        "date": "2016-11-17T05:48:39.981Z",
        "age": 5
      },
      "phone": "07-9040-0066",
      "cell": "0478-616-061",
      "id": {
        "name": "TFN",
        "value": "531395478"
      },
      "picture": {
        "large": "https://randomuser.me/api/portraits/women/24.jpg",
        "medium": "https://randomuser.me/api/portraits/med/women/24.jpg",
        "thumbnail": "https://randomuser.me/api/portraits/thumb/women/24.jpg"
      },
      "nat": "AU"
    }
  ],
  "info": {
    //
  }
}

so the actual user object is in the results array.
now lets add our test

// we need to import two packages.
// we will mock the
import axios from 'axios';
// and we will use this user-event to click the button.
import userEvent from '@testing-library/user-event';

// this test will be having async/await
it('displays title, first and lastname of loaded user from randomuser.me', async () => {
  render(<RandomUser />);
  const loadButton = screen.queryByRole('button', {
    name: 'Load Random User'
  });

  // we will click the button but our request must not be going
  // to the real server. we can't be sure how that request
  // ends up. So we will mock it. Lets make sure we set what
  // axios will return. 
  // lets define the mock function first
  // axios get, post ... functions are promise and here
  // we will mock success response by mockResolvedValue
  // and we will return the axios response object.
  // so we put the actual api response into data object here
  const mockApiCall = jest.fn().mockResolvedValue({
    data: {
      results: [
        {
          name: {
            title: 'Miss',
            first: 'Jennifer',
            last: 'Alvarez'
          }
        }
      ]
    }
  });
  // now lets assign this mock function to axios.get
  axios.get = mockApiCall;
  // then we can click the button
  userEvent.click(loadButton);
  // and we expect to see this text on screen.
  // this is dependent onto async operation to complete
  // so to wait that api call to finish, we use this findBy...
  const userInfo = await screen.findByText("Miss Jennifer Alvarez");
  expect(userInfo).toBeInTheDocument();
});

this test fails and you should be seeing a message like this

  ● Random User › displays title, first and lastname of loaded user from randomuser.me

    TestingLibraryElementError: Unable to find an element with the text: Miss Jennifer Alvarez. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

lets fix this.

// RandomUser.js

// importing axios, we will make api call
import axios from 'axios';
// we need to have a state
import { useState } from 'react';

export default function RandomUser(){
  // we have user object in state
  const [user, setUser] = useState();

  // this function will be handling the api call
  const loadRandomUser = async () => {
    try {
      const response = await axios.get('https://randomuser.me/api')
      // updates the user object with the loaded data
      setUser(response.data.results[0])
    } catch (error) {
    }
  }

  return (
    <>
      <button onClick={loadRandomUser}>Load Random User</button>
      // if we have user, lets display the name
      {user && (
        <h1>{`${user.name.title} ${user.name.first} ${user.name.last}`}</h1>
      )}
    </>
  );
}

after these changes test will pass.

With mocking, we have a predictable behavior in our application. If we test this on browser, we can see in each click, we receive different users.

But the downside of mocking is, now our test is highly coupled with our implementation detail. If we decide to replace axios with fetch, then our test needs to be refactored accordingly.

lets do that.

npm i -D whatwg-fetch

now lets import this one in our test and re-run tests.

// RandomUser.spec.js
import 'whatwg-fetch';

But other than this import, lets do nothing on test. But lets use fetch in our component.

// RandomUser.js
  const loadRandomUser = async () => {
    try {
      const response = await fetch('https://randomuser.me/api');
      const body = await response.json();
      setUser(body.results[0]);
    } catch (error) {
    }
  }

We are going to use the library Mock Service Worker - MSW
Lets install it

npm i -D msw

We are going to use it in our test module.

// RandomUser.spec.js
// lets import these two functions
import { setupServer } from "msw/node";
import { rest } from "msw";

it('displays title, first and lastname of loaded user from randomuser.me', async () => {
// here we will create a server
  const server = setupServer(
    // and this server is going to be processing the GET requests
    rest.get("https://randomuser.me/api", (req, res, ctx) => {
      // and here is the response it is returning back
      return res(ctx.status(200), ctx.json({
        results: [
          {
            name: {
              title: 'Miss',
              first: 'Jennifer',
              last: 'Alvarez'
            }
          }
        ]
      }));
    })
  );
  // then..
  server.listen();
  // so at this step we have a server
  // after this part we don't need to deal with axios or fetch
  // in this test function
  render(<RandomUser />);
  const loadButton = screen.queryByRole('button', {
    name: 'Load Random User'
  });
  userEvent.click(loadButton);
  const userInfo = await screen.findByText("Miss Jennifer Alvarez");
  expect(userInfo).toBeInTheDocument();
});

after this change, test must be passing.
Now our test is not dependent onto the client we are using. We can go back and use axios again.

const loadRandomUser = async () => {
  try {
    const response = await axios.get('https://randomuser.me/api')
    user = response.data.results[0];
  } catch (error) {
  }
}

Tests must be passing with this usage too.

Resources

Github repo for this project can be found here

basarbk / dev-to-tdd-react

Repository of article project about test driven development with react published in dev.to

You can also check this video tutorial about similar topic

If you would be interested in a full TDD course on react, you can check my course at udemy React with Test Driven Development

Test Driven Development with Svelte - To Mock or Not to Mock

Basar Buyukkahraman — Wed, 29 Sep 2021 14:48:25 +0000

Mocking

Our test target component can interact with internal and/or external services. And sometimes in our tests, instead of interacting with those real services, we need their mock version. Sometimes we use mocks because of the complexity of the test setup, or we use them to have predictable behavior in our test.

For instance, a service used by our component can be dependent on to Math.random(). Since we cannot know what that random result will be, we cannot have predictable tests for our component.

In web applications, the frontend interacts with backend and those interactions are also unpredictable. When you run the test, there can be delays or timeouts in the request, or since we cannot control that external service state, we cannot know what kind of response will be received.

Lets see it on this example.

To Mock

For this scenario lets use a public api.
https://randomuser.me/

lets create a new component, RandomUser.svelte and corresponding test module RandomUser.spec.js

and lets add our first test

// RandomUser.spec.js
import RandomUser from './RandomUser.svelte';
import { fireEvent, render, screen } from '@testing-library/svelte';
import '@testing-library/jest-dom';

describe('Random User', () => {
  it('has button to load random user', () => {
    render(RandomUser);
    const loadButton = screen.queryByRole('button', { name: 'Load Random User'});
    expect(loadButton).toBeInTheDocument();
  })
})

this first test is looking for a button on page. Lets add it. But before that make sure you run the test in console by runnin npm test

then lets add the button

<!-- RandomUser.svelte -->
<button>Load Random User</button>

Test is passing now.

Lets show this component in our application.

// main.js
import RandomUser from './RandomUser.svelte';

const app = new RandomUser({
    target: document.body
});

export default app;

open another terminal and run app npm run dev. Open http://localhost:5000

You must be seeing a button on page.

Now we are going to click to this button and it will be making an api call to randomuser.me
But first lets install a library for this api call.

npm i axios@0.21.1

somehow the latest version of axios is causing trouble with the rollup. to simplify the setup, using this version.

Make sure you stop and start test and app consoles after installing a new dependency.

Lets use axios for http calls.

We are going to add our test for this requirement. But first lets see the returned object from randomuser api.

{
  "results": [
    {
      "gender": "female",
      "name": {
        "title": "Miss",
        "first": "Jennifer",
        "last": "Alvarez"
      },
      "location": {
        //
      },
      "email": "jennifer.alvarez@example.com",
      "login": {
         //
      },
      "dob": {
        "date": "1954-07-01T18:59:36.451Z",
        "age": 67
      },
      "registered": {
        "date": "2016-11-17T05:48:39.981Z",
        "age": 5
      },
      "phone": "07-9040-0066",
      "cell": "0478-616-061",
      "id": {
        "name": "TFN",
        "value": "531395478"
      },
      "picture": {
        "large": "https://randomuser.me/api/portraits/women/24.jpg",
        "medium": "https://randomuser.me/api/portraits/med/women/24.jpg",
        "thumbnail": "https://randomuser.me/api/portraits/thumb/women/24.jpg"
      },
      "nat": "AU"
    }
  ],
  "info": {
    //
  }
}

so the object we are looking for is in the results array.
now lets add our test

// this test will be having async/await
it('displays title, first and lastname of loaded user from randomuser.me', async () => {
  render(RandomUser);
  const loadButton = screen.queryByRole('button', {
    name: 'Load Random User'
  });

  // we will click the button but our request must not be going
  // to the real server. we can't be sure how that request
  // ends up. So we will mock it. Lets make sure we set what
  // axios will return. 
  // lets define the mock function first
  // axios get, post ... functions are promise and here
  // we will mock success response by mockResolvedValue
  // and we will return the axios response object.
  // so we put the actual api response into data object here
  const mockApiCall = jest.fn().mockResolvedValue({
    data: {
      results: [
        {
          name: {
            title: 'Miss',
            first: 'Jennifer',
            last: 'Alvarez'
          }
        }
      ]
    }
  });
  // now lets assign this mock function to axios.get
  axios.get = mockApiCall;
  // then we can click the button
  fireEvent.click(loadButton);
  // and we expect to see this text on screen.
  const userInfo = await screen.findByText("Miss Jennifer Alvarez");
  expect(userInfo).toBeInTheDocument();
});

this test fails and you should be seeing a message like this

  ● Random User › displays title, first and lastname of loaded user from randomuser.me

    TestingLibraryElementError: Unable to find an element with the text: Miss Jennifer Alvarez. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

lets fix this.

<!-- RandomUser.svelte -->
<script>
  // importing axios
  import axios from 'axios';
  // having a state variable for loaded user object
  let user;
  // this function will be loading the user
  const loadRandomUser = async () => {
    try {
      const response = await axios.get('https://randomuser.me/api')
      // assigning the result to user object
      user = response.data.results[0];
    } catch (error) {
    }
  }

</script>

<!-- assign the on:click-->
<button on:click={loadRandomUser}>Load Random User</button>
<!-- and if we have user lets display it-->
{#if user}
  <h1>{`${user.name.title} ${user.name.first} ${user.name.last}`}</h1>
{/if}

after these changes test will pass.

With mocking, we have a predictable behavior in our application. If we test this on browser, we can see in each click, we receive different users.

But the downside of mocking is, now our test is highly coupled with our implementation detail. If we decide to replace axios with fetch, then our test needs to be refactored accordingly.

lets do that.

The fetch is coming with the browser. So to use it in our component we don't need to install anything. But in our test environment, jest is running the tests and it doesn't have fetch in it. So using fetch in application will cause problem on test part. To resolve this lets install another package. This is only needed for test modules.

npm i -D whatwg-fetch

now lets import this one in our test

// RandomUser.spec.js
import "whatwg-fetch";

But other than this import, lets do nothing on test. But lets use fetch on our app.

// RandomUser.svelte
<script>
//

  // lets replace axios with fetch here
  const loadRandomUser = async () => {
    try {
      const response = await fetch('https://randomuser.me/api');
      // to get the response body, we need ..
      const body = await response.json();
      user = body.results[0];
    } catch (error) {
    }
  }
</script

Or Not To Mock

We are going to use the library Mock Service Worker - MSW
Lets install it

npm i msw

We are going to use it in our test module.

// RandomUser.spec.js
// lets import these two functions
import { setupServer } from "msw/node";
import { rest } from "msw";

it('displays title, first and lastname of loaded user from randomuser.me', async () => {
// here we will create a server
  const server = setupServer(
    // and this server is going to be processing the GET requests
    rest.get("https://randomuser.me/api", (req, res, ctx) => {
      // and here is the response it is returning back
      return res(ctx.status(200), ctx.json({
        results: [
          {
            name: {
              title: 'Miss',
              first: 'Jennifer',
              last: 'Alvarez'
            }
          }
        ]
      }));
    })
  );
  // then..
  server.listen();
  // so at this step we have a server
  // after this part we don't need to deal with axios or fetch
  // in this test function
  render(RandomUser);
  const loadButton = screen.queryByRole('button', {
    name: 'Load Random User'
  });
  fireEvent.click(loadButton);
  const userInfo = await screen.findByText("Miss Jennifer Alvarez");
  expect(userInfo).toBeInTheDocument();
});

after this change, test must be passing.
Now our test is not dependent onto the client we are using. We can go back and use axios again.

const loadRandomUser = async () => {
  try {
    const response = await axios.get('https://randomuser.me/api')
    user = response.data.results[0];
  } catch (error) {
  }
}

Tests must be passing with this usage too.

Resources

Github repo for this project can be found here

basarbk / dev-svelte-tdd

Repository of article project about test driven development with svelte published in dev.to

You can also check this video tutorial for the same setup steps of svelte projects

And if you would be interested, I have a full course TDD in svelte. Svelte with Test Driven Development

Thanks for reading

Test Driven Development with Svelte - Querying Elements

Basar Buyukkahraman — Tue, 31 Aug 2021 13:43:10 +0000

In the previous one we have installed the necessary dependencies for testing svelte app. Now in this one we are going to see how we can query the elements how we can interact with them.

Building the Registration Form

If the test is not running already, open console and run npm test
Lets start by creating a new svelte component and corresponding test module.
Let's add just the SignUpPage.svelte file. Leave it empty for now. And lets create SignUpPage.spec.js file.
You will see a fail message in console for SignUpPage.spec, because we don't have a test in it yet. Lets start with our first test

and since this file is just created lets start with the imports

// SignUpPage.spec.js
import SignUpPage from './SignUpPage.svelte';
import { render, screen } from '@testing-library/svelte';
import '@testing-library/jest-dom';

now lets add our first test. In this page we will have form form sign up and lets make sure we have a header about it.

// SignUpPage.spec.js
it('has Sign Up header', () => {
    render(SignUpPage);
    const header = screen.getByRole('heading', { name: 'Sign Up'});
    expect(header).toBeInTheDocument();
})

We are using two functions of testing-library. First we are rendering the component. The test runner, Jest is using jsdom. And it is providing us a browser-like environment. And the testing library is rendering the component into that document. And then we run queries coming with screen to get the elements we are looking for in that document.
To get a better view about all available query functions, you can check the testing-library documentation
from docs

Queries are the methods that Testing Library gives you to find elements on the page. There are several types of queries ("get", "find", "query"); the difference between them is whether the query will throw an error if no element is found or if it will return a Promise and retry.

So in this one we are using getByRole query. With this query, we are able to get the elements based on their accessibility roles.

We are looking for an element with heading role in this page. This means we will have h1-h6 elements or another html element having this role set for it.

After saving this test module, jest will run tests and in console you will see fail message.

TestingLibraryElementError: Unable to find an accessible
element with the role "heading" and name "Sign Up"

Now we can fix it by adding header to our SignUpPage.svelte

<!-- SignUpPage.svelte -->
<h1>Sign Up</h1>

After adding this one, test will pass.

Now lets add form inputs. User will be entering the sign up data and we need to have couple of inputs for it. Lets start with username input.
We will have multiple input elements and to tell which input is for which field, we need to show some text about it to user. We can use placeholder text for the inputs or we can associate labels with them. Testing-library is providing both query types. Lets go with placeholder first.

// SignUpPage.spec.js
it('has input for username', () => {
    render(SignUpPage);
    const input = screen.getByPlaceholderText('Username');
    expect(input).toBeInTheDocument();
})

To get the inputs based on their placeholder, we user getByPlacholderText function.

Lets fix this by adding this input

<!-- SignUpPage.svelte -->
<h1>Sign Up</h1>
<!-- Right after this h1 lets add input and
lets set the placeholder for it -->
<input placeholder="Username" />

This is fixing the test.
If you would like to use Label, instead of placeholder, then the test would be something like this.

// SignUpPage.spec.js
it('has input for username', () => {
    render(SignUpPage);
    // just replace getByPlaceholderText with getByLabelText
    const input = screen.getByLabelText('Username');
    expect(input).toBeInTheDocument();
})

and the corresponding implementation would be like this

<!-- SignUpPage.svelte -->
<label for="username">Username</label>
<input id="username" />

We add a label having Username text and associate with the input element.
After this change test will pass.

Just like this one add inputs for email and password. They are basically copy of the username input test

<!-- SignUpPage.spec.js -->
it('has input for email', () => {
    render(SignUpPage);
    const input = screen.getByLabelText('E-mail');
    expect(input).toBeInTheDocument();
})
it('has input for password', () => {
    render(SignUpPage);
    const input = screen.getByLabelText('Password');
    expect(input).toBeInTheDocument();
})

and corresponding inputs are here

<!-- SignUpPage.svelte -->
<h1>Sign Up</h1>
<label for="username">Username</label>
<input id="username" />
<!-- -->
<label for="email">E-mail</label>
<input id="email" />
<label for="password">Password</label>
<input id="password" />

After these changes the tests will be passing.

To see the progress on browser you can run the application like this.

npm run dev

To see the SignUpPage, make sure to update main.js in the project

// main.js
import SignUpPage from './SignUpPage.svelte';

const app = new SignUpPage({
    target: document.body
});

export default app;

In password inputs we must be masking the user entries as they type. But currently, if you type anything to password input, all will be in clear text. Lets fix that

// SignUpPage.spec.js
it('has type as password for password input', () => {
    render(SignUpPage);
    const input = screen.getByLabelText('Password');
    expect(input.type).toBe('password');
})

Now we need to check an implementation detail for this case. We are looking for input's type attribute to have the value of password.

<!-- SignUpPage.svelte -->
<label for="password">Password</label>
<!-- just setting type for the input -->
<input id="password" type="password"/>

Now the tests are passing. And if you check on browser, you will see the password input is masking the user entry.

Since the password is masked now, to make sure user enters the value they intend to, lets add second password input for confirmation.
Just copy and password last two password input tests and update their description and label texts.

// SignUpPage.spec.js
it('has input for password repeat', () => {
    render(SignUpPage);
    const input = screen.getByLabelText('Password Repeat');
    expect(input).toBeInTheDocument();
})
it('has type as password for password repeat input', () => {
    render(SignUpPage);
    const input = screen.getByLabelText('Password Repeat');
    expect(input.type).toBe('password');
})

and repeating same step on svelte component too.

<!-- SignUpPage.svelte -->
<label for="password-repeat">Password Repeat</label>
<input id="password-repeat" type="password"/>

We are about to complete this form. All we need is just a button to let user send the request. Adding a test for it

// SignUpPage.spec.js
it('has Sign Up button', () => {
    render(SignUpPage);
    const button = screen.getByRole('button', { name: 'Sign Up'});
    expect(button).toBeInTheDocument();
})

and lets add button to our page.

<!-- SignUpPage.svelte -->
<button>Sign Up</button>

Lets add one final test for this part. Lets make sure the button is initially disabled. Later we are going to enable it after user enters same value to both password and password repeat inputs.

it('disables the button initially', () => {
    render(SignUpPage);
    const button = screen.getByRole('button', { name: 'Sign Up'});
    // for the matcher functions we are using
    // '@testing-library/jest-dom' and for this case
    // we can use
    expect(button).toBeDisabled();

    // or we have option to use matcher with 'not' function
    // expect(button).not.toBeEnabled();
})

and we fix it by adding disabled attribute to button

<button disabled>Sign Up</button>

All tests are passing now. We have our form now.

Next, we will implement the interactions..

Resources

Github repo for this project can be found here

basarbk / dev-svelte-tdd

Repository of article project about test driven development with svelte published in dev.to

You can also check this video tutorial for the same form creation for svelte projects

And if you would be interested, I have a full course TDD in svelte. Svelte with Test Driven Development

Thanks for reading

Test Driven Development with Svelte - Setup

Basar Buyukkahraman — Fri, 13 Aug 2021 19:39:07 +0000

Creating Project

as shown right here lets create a svelte project first.

$ npx degit sveltejs/template my-svelte-project
$ cd my-svelte-project
$ npm install

the created project has following package.json

{
  "name": "my-svelte-project",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --no-clear"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^17.0.0",
    "@rollup/plugin-node-resolve": "^11.0.0",
    "rollup": "^2.3.4",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "svelte": "^3.0.0"
  },
  "dependencies": {
    "sirv-cli": "^1.0.0"
  }
}

As you can see here, we don't have any dependency about the testing of our application. Lets install test related dependencies.

npm i -D jest babel-jest @babel/preset-env svelte-jester

jest* is the test runner and it also has the assertion and mocking functionalities.
babel-jest and @babel/preset-env is for using latest javascript functionalities in our test modules. Like using es6 imports.
Jest cannot run test modules having es6 imports in them. So we will configure jest to transform the test modules with babel.
And last one is svelte-jester. We are going to import Svelte files in our test modules. Jest does not know how to process them. So we are going to use this svelte-jester to transform those files before jest runs the tests.

We will also need additional dependencies specifically for testing svelte components. And for that we are going to use testing-library

npm i -D @testing-library/svelte @testing-library/jest-dom
@testing-library/svelte is for rendering svelte components in our test functions
@testing-library/jest-dom is for having custom DOM related element matcher functions for Jest.

Now we need to configure jest. We can do this configuration in package.json

// package.json
  },
  // after depedencies we can add
  "jest": {
    "transform": {
      "^.+\\.svelte$": "svelte-jester",
      "^.+\\.js$": "babel-jest"
    },
    "moduleFileExtensions": [
      "js",
      "svelte"
    ],
    "testEnvironment": "jsdom"
  }

The first configuration we are setting here is the transform. And with this configuration, we are telling if a file used in test module has extension of *.svelte, then svelte-jester will transform it. If file has *.js extension, then babel-jest will transform it.
The second configuration is moduleFileExtensions and in this one we are listing the file extensions in our test modules. Jest can watch our files and run tests as soon as it detects changes in them. And with this list, we are telling jest to watch the changes in the files having these extensions.
And the last configuration, testEnvironment will be set to jsdom . Before jest version 27, this was by default jsdom. With v27 it is by default node. Since this is going to be testing a web application, the environment must be set to jsdom.
For babel transform part, we also need to add a configuration file to our project. In the folder where the package.json is, let's create a file with name of babel.config.js.
And paste following part into that file. reference is here

// babel.config.js
module.exports = {
  presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
};

we completed our configuration. Finally lets add test script.

// package.json
  "scripts": {
    // adding
    "test": "jest --watchAll"
  },

Let's run test from console by running
npm test

Now jest is watching our source code and it is going to run the tests as soon as it detects changes in js and svelte files.
Since we don't have any test module yet, you will see following message in console.

No tests found, exiting with code 0

now lets create a test module. Jest is looking for files having extensions either *.spec.js or *.test.js. I choose .spec.js.

Lets create a new file. App.spec.js

// 1 - first lets import the target component.
// lets test App.svelte
import App from './App.svelte';
// 2 - and we are going to render this component
// with @testing-library . lets import
import { render, screen } from '@testing-library/svelte';
// 3 - and lets also import
import '@testing-library/jest-dom';

// 4 -  and lets add our test
it('has Hello Text', () => {
    // 5 - first we render the App.svelte
    render(App);
    // 6 - Then we are going to query the element we
    // are looking for. We will use query functions
    // coming with screen.
    const message = screen.queryByText('Hello Text');
    // 7 - And last part is the assertion
    expect(message).toBeInTheDocument();
})

Now in test console we are going to see following output

 FAIL  src/App.spec.js
  ✕ has Hello Text (46 ms)

  ● has Hello Text

    expect(received).toBeInTheDocument()

    received value must be an HTMLElement or an SVGElement.
    Received has value: null

      6 |     render(App);
      7 |     const message = screen.queryByText('Hello Text');
    > 8 |     expect(message).toBeInTheDocument();
        |                     ^
      9 | })

      at __EXTERNAL_MATCHER_TRAP__ (node_modules/expect/build/index.js:342:30)
      at Object.toBeInTheDocument (node_modules/expect/build/index.js:343:15)
      at Object.<anonymous> (src/App.spec.js:8:21)

  console.warn
    <App> was created without expected prop 'name'


      at new App (src/App.svelte:123:12)
      at render (node_modules/@testing-library/svelte/dist/pure.js:81:21)
      at Object.<anonymous> (src/App.spec.js:6:5)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        2.067 s
Ran all test suites.

Watch Usage: Press w to show more.

The App does not have Hello Text in it.
Lets clear everything in App.svelte and just add the expected text to it.

<!-- App.svelte -->
Hello Text

Now the test is passing and you will see following output in console.

 PASS  src/App.spec.js
  ✓ has Hello Text (16 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.953 s, estimated 2 s

We completed test setup of our project.

Resources

Github repo for this project can be found here

basarbk / dev-svelte-tdd

Repository of article project about test driven development with svelte published in dev.to

You can also check this video tutorial for the same setup steps of svelte projects

And if you would be interested, I have a full course TDD in svelte. Svelte with Test Driven Development

Thanks for reading