add play stories and fix play functionality

src/stories/Test.tsx

@@ -1,10 +1,23 @@
-import React, {FC} from 'react';
-import {useTranslation} from 'react-i18next';
+import React, {FC, useState} from 'react';
+import {useTranslation, Trans} from 'react-i18next';
 
 const Test: FC = () => {
     const {t} = useTranslation();
+    const [count, setCount] = useState(0);
 
-    return <div>{t('hello')}</div>;
+    const onClick = () => setCount((count) => count + 1);
+
+    return (
+        <div>
+            <span>{t('hello')}</span>{' '}
+            <span>
+                <Trans>world</Trans>
+            </span>
+            <div style={{marginTop: '1rem'}}>
+                <button onClick={onClick}>{t('click', {count})}</button>
+            </div>
+        </div>
+    );
 };
 
 export default Test;

src/stories/locales/en.ts

@@ -1,3 +1,6 @@
 export default {
     hello: 'Hello',
+    world: 'World',
+    click_one: '{{count}} click',
+    click_other: '{{count}} clicks',
 };

src/stories/locales/fr.ts

@@ -1,3 +1,6 @@
 export default {
     hello: 'Bonjour',
+    world: 'Monde',
+    click_one: '{{count}} clic',
+    click_other: '{{count}} clics',
 };

src/stories/locales/ja.ts

@@ -1,3 +1,6 @@
 export default {
     hello: 'こんにちは',
+    world: '世界',
+    click_one: '{{count}}クリック',
+    click_other: '{{count}}クリック',
 };

src/stories/test.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import type {Meta, StoryObj} from '@storybook/react';
+import {userEvent, within} from '@storybook/testing-library';
 import Test from './Test';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
@@ -34,3 +35,56 @@ export const Japanese: StoryObj = {
     },
     render: Test,
 };
+
+export const PlayDefault: StoryObj = {
+    render: Test,
+};
+PlayDefault.play = async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+    await userEvent.click(button);
+    await userEvent.click(button);
+    await userEvent.click(button);
+};
+
+export const PlayEnglish: StoryObj = {
+    parameters: {
+        locale: 'en',
+    },
+    render: Test,
+};
+PlayEnglish.play = async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+    await userEvent.click(button);
+    await userEvent.click(button);
+    await userEvent.click(button);
+};
+
+export const PlayFrench: StoryObj = {
+    parameters: {
+        locale: 'fr',
+    },
+    render: Test,
+};
+PlayFrench.play = async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+    await userEvent.click(button);
+    await userEvent.click(button);
+    await userEvent.click(button);
+};
+
+export const PlayJapanese: StoryObj = {
+    parameters: {
+        locale: 'ja',
+    },
+    render: Test,
+};
+PlayJapanese.play = async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+    await userEvent.click(button);
+    await userEvent.click(button);
+    await userEvent.click(button);
+};

src/withI18Next.tsx

@@ -1,4 +1,4 @@
-import React, {ReactNode} from 'react';
+import React, {Fragment, ReactNode, useState} from 'react';
 import {useEffect, useGlobals} from '@storybook/client-api';
 import {
     PartialStoryFn as StoryFunction,
@@ -15,17 +15,29 @@ export const withI18Next = (
         parameters: {i18n},
     } = context;
 
+    const language = i18n.language;
+
     const [{locale}] = useGlobals();
+    const [key, setKey] = useState(0);
+
+    useEffect(() => {
+        i18n.on('languageChanged', () => {
+            setKey(Date.now());
+        });
+        return () => i18n.off('languageChanged');
+    }, []);
 
     useEffect(() => {
-        if (locale) {
-            i18n?.changeLanguage(locale);
+        if (i18n && locale && language && locale !== language) {
+            i18n.changeLanguage(locale);
         }
-    }, [locale]);
+    }, [language, locale, i18n]);
 
     return (
-        <I18nextProvider i18n={i18n}>
-            {story(context) as ReactNode | null}
-        </I18nextProvider>
+        <Fragment key={key}>
+            <I18nextProvider i18n={i18n}>
+                {story(context) as ReactNode | null}
+            </I18nextProvider>
+        </Fragment>
     );
 };