Add TS version of testing-library snippet

JungHoe · Apr 26, 2023 · ee0b656 · ee0b656
1 parent 2f43e3c
commit ee0b656
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/docs/snippets/react/component-test-with-testing-library.ts.mdx b/docs/snippets/react/component-test-with-testing-library.ts.mdx
@@ -0,0 +1,19 @@
+```ts
+// Form.test.ts|tsx
+
+import { render, fireEvent } from '@testing-library/react';
+
+import { composeStory } from '@storybook/react';
+
+import Meta, { InvalidForm } from './LoginForm.stories'; //👈 Our stories imported here.
+
+it('Checks if the form is valid', () => {
+  const ComposedInvalidForm = composeStory(InvalidForm, Meta);
+  const { getByTestId, getByText } = render(<ComposedInvalidForm />);
+
+  fireEvent.click(getByText('Submit'));
+
+  const isFormValid = getByTestId('invalid-form');
+  expect(isFormValid).toBeInTheDocument();
+});
+```
diff --git a/docs/writing-tests/importing-stories-in-tests.md b/docs/writing-tests/importing-stories-in-tests.md
@@ -78,6 +78,7 @@ For example, if you were working on a login component and wanted to test the inv
 <CodeSnippets
   paths={[
     'react/component-test-with-testing-library.js.mdx',
+    'react/component-test-with-testing-library.ts.mdx',
     'vue/component-test-with-testing-library.js.mdx',
     'angular/component-test-with-testing-library.ts.mdx',
     'svelte/component-test-with-testing-library.js.mdx',