diff --git a/src/__tests__/components/TransitionSample.vue b/src/__tests__/components/TransitionSample.vue
new file mode 100644
index 0000000..2513e61
--- /dev/null
+++ b/src/__tests__/components/TransitionSample.vue
@@ -0,0 +1,36 @@
+<template>
+ <div>
+ <button @click="toggle">toggle</button>
+ <div class="naked_tr">+ <div v-show="isShown">
+ <p>{{ showingText }}</p>
+ </div>
+ </transition>
+ </div>
+</template>
+
+
+
+
diff --git a/src/__tests__/transition.js b/src/__tests__/transition.js
new file mode 100644
index 0000000..e8003f6
--- /dev/null
+++ b/src/__tests__/transition.js
@@ -0,0 +1,42 @@
+import '@testing-library/jest-dom'
+
+import {fireEvent, render} from '..'
+
+import TransitionSample from './components/TransitionSample'
+
+test('shows the text', async () => {
+ // In Vue Test Utils, the <div class="naked_tr"> component is stubbed
+ // by default, but javascript hooks are not supported.
+ // If you want to test user interactions using javascript hooks,
+ // you can turn off the <div class="naked_tr"> component stubbing
+ // by setting global stubs transition to false.
+ const {getByRole, findByText} = render(TransitionSample, {
+ global: {
+ stubs: {
+ transition: false,
+ },
+ },
+ })
+
+ // Trigger fade in the text.
+ await fireEvent.click(getByRole('button', {name: 'toggle'}))
+
+ // If setting transition stubs, this assertion is failed
+ // because javascript hooks are not called and the text is not changed.
+ expect(await findByText('Completed.')).toBeVisible()
+})
+
+test('hides the text', async () => {
+ // If there is no need to use JavaScript Hooks,
+ // you can render with the default settings.
+ const {getByRole, queryByText} = render(TransitionSample)
+
+ // Trigger fade in the text.
+ const toggleButton = getByRole('button', {name: 'toggle'})
+ await fireEvent.click(toggleButton)
+
+ // And trigger fade out the text.
+ await fireEvent.click(toggleButton)
+
+ expect(queryByText('Now fade out...')).not.toBeVisible()
+})
</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://patch-diff.githubusercontent.com/raw/testing-library/vue-testing-library/pull/327.diff">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://patch-diff.githubusercontent.com/raw/testing-library/vue-testing-library/pull/327.diff" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>