Skip to content

Commit

Permalink
Apply suggestions from code review
Browse files Browse the repository at this point in the history
Co-authored-by: jonniebigodes <joaocontadesenvolvimento@gmail.com>
  • Loading branch information
kylegach and jonniebigodes committed Apr 30, 2024
1 parent 5fafb46 commit a9ce1d4
Show file tree
Hide file tree
Showing 3 changed files with 7 additions and 7 deletions.
8 changes: 4 additions & 4 deletions docs/get-started/nextjs.md
Original file line number Diff line number Diff line change
Expand Up @@ -688,7 +688,7 @@ To configure subpath imports, you define the `imports` property in your project'

<Callout variant="info">

Because subpath imports take the place of module aliases, you can remove the path aliases from your TypeScript configuration.
Because subpath imports replace module aliases, you can remove the path aliases from your TypeScript configuration.

</Callout>

Expand Down Expand Up @@ -726,7 +726,7 @@ This framework provides mocks for many of Next.js' internal modules:

How you mock other modules in Storybook depends on how you import the module into your component.

The first step, with either approach, is to [create a mock file](../writing-stories/mocking-modules.md#mock-files). Here's an example of a mock file for a module named `session`:
With either approach, the first step is to [create a mock file](../writing-stories/mocking-modules.md#mock-files). Here's an example of a mock file for a module named `session`:

<!-- TODO: Snippetize -->

Expand Down Expand Up @@ -1024,13 +1024,13 @@ You can refer to the [Install `sharp` to Use Built-In Image Optimization](https:

### Modules

The `@storybook/nextjs` package exports a number of modules that enables you to [mock](#mocking-modules) Next.js's internal behavior.
The `@storybook/nextjs` package exports several modules that enable you to [mock](#mocking-modules) Next.js's internal behavior.

#### `@storybook/nextjs/export-mocks`

Type: `{ getPackageAliases: ({ useESM?: boolean }) => void }`

`getPackageAliases` is a helper to generate the aliases needed to set up [portable stories](#portable-stories).
`getPackageAliases` is a helper for generating the aliases needed to set up [portable stories](#portable-stories).

```ts
// jest.config.ts
Expand Down
2 changes: 1 addition & 1 deletion docs/writing-stories/build-pages-with-storybook.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ Components can receive data or configuration from context providers. For example

### [Mocking API Services](./mocking-network-requests.md)

For components that make network requests (e.g. fetching data from a REST or GraphQL API), you can mock those requests in your stories.
For components that make network requests (e.g., fetching data from a REST or GraphQL API), you can mock those requests in your stories.

### [Mocking imports](./mocking-modules.md)

Expand Down
4 changes: 2 additions & 2 deletions docs/writing-stories/mocking-modules.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export const getUserFromSession = fn(actual.getUserFromSession);

### Mock files for external modules

You can't directly mock an external module like `uuid` or `node:fs`. Instead, you must wrap the module in you own module, which you can then mock like any other internal module. In this example, we wrap `uuid`:
You can't directly mock an external module like [`uuid`](https://github.com/uuidjs/uuid) or `node:fs`. Instead, you must wrap it in your own module, which you can mock like any other internal one. For example, with `uuid`, you could do the following:

```ts
// lib/uuid.ts
Expand Down Expand Up @@ -190,7 +190,7 @@ export const Default: Story = {

<Callout variant="info">

If you are [writing your stories in TypeScript](./typescript.md), you will need to import your mock modules using the full mocked file name to have the mocked function correctly typed in your stories. You do **not** need do this in your component files, that's what the [subpath import](#subpath-imports) or [builder alias](#builder-aliases) is for.
If you are [writing your stories in TypeScript](./typescript.md), you must import your mock modules using the full mocked file name to have the functions correctly typed in your stories. You do **not** need to do this in your component files. That's what the [subpath import](#subpath-imports) or [builder alias](#builder-aliases) is for.

</Callout>

Expand Down

0 comments on commit a9ce1d4

Please sign in to comment.