GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-08 11:11:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add TS version of testing-library snippet

Browse Source
This commit is contained in:
JungHoe 2023-04-26 22:20:28 +09:00
parent ffddc4b822
commit 9b95eaa3f7
2 changed files with 20 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
docs/snippets/react/component-test-with-testing-library.ts.mdx Normal file
View File

@ -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();
});
```

1
docs/writing-tests/importing-stories-in-tests.md
View File

@ -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',