Unit tests #19
Unit tests #19
Conversation
|
Thanks a lot! I will look into it in the upcoming weeks! |
src/components/Button.spec.js
Outdated
| }); | ||
|
|
||
| test('show alert when the button gets clicked', async () => { | ||
| const { getByTestId, findByRole } = render(Button, {title: 'testButton'}); |
There was a problem hiding this comment.
In the spirit of the guiding principles, it is recommended to use this only after the other queries don't work for your use case. Using data-testid attributes do not resemble how your software is used and should be avoided if possible. (https://testing-library.com/docs/queries/bytestid)
I would recommend to use getByRole as the button element has the default role button
src/components/Button.svelte
Outdated
| @@ -4,7 +4,7 @@ | |||
| export let title = ''; | |||
| </script> | |||
|
|
|||
| <button title="{title}" disabled="{disabled}" on:click="{buttonAction}"> | |||
| <button data-testid="testButton" title="{title}" disabled="{disabled}" on:click="{buttonAction}"> | |||
There was a problem hiding this comment.
When we use getByRole we also don't need to introduce data-testid
.babelrc
Outdated
| @@ -0,0 +1,6 @@ | |||
| { | |||
There was a problem hiding this comment.
why do we need both the file .babelrc and babel.config.js? Can we delete .babelrc?
There was a problem hiding this comment.
yes, I think so. I will delete it.
babel.config.js
Outdated
| @@ -0,0 +1,6 @@ | |||
| module.exports = { | |||
There was a problem hiding this comment.
I need to rename babel.config.js to babel.config.cjs to make it work. Otherwise I get error error while loading config - You appear to be using a native ECMAScript module configuration file, which is only supported when running Babel asynchronously.
|
Hope you are fine? |
|
Thanks a lot! |
Hi Malte,
you can find an example unit test in this pull request.
regards
Kristian