Skip to content

docs: add note in testing SFCs with Jest for Vue CLI users #1556

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 28, 2020
Merged

docs: add note in testing SFCs with Jest for Vue CLI users #1556

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ca04460
docs: add note in testing SFCs with Jest for Vue CLI users
samgladstone May 23, 2020
7cf2342
docs: update text in Testing SFCs with Jest be more straightforward
samgladstone May 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions docs/guides/testing-single-file-components-with-jest.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,12 @@ Jest is a test runner developed by Facebook, aiming to deliver a battery-include

We will assume you are starting with a setup that already has webpack, vue-loader and Babel properly configured - e.g. the `webpack-simple` template scaffolded by `vue-cli`.

> Alternatively, if you are using the Vue CLI rather than webpack to build your project, you can use the plugin [cli-plugin-unit-jest](https://cli.vuejs.org/core-plugins/unit-jest.html#injected-commands) to run Jest tests.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Vue CLI does use webpack internally to build the project, though. I think this is a bit confusing. Maybe I misunderstood - can you potentially reword this?

Copy link
Contributor Author

@samgladstone samgladstone May 26, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For sure, I was aware of that and it is partly where I got confused as I just followed the instructions on my first try.

I could take it out:

Alternatively, if you are using the Vue CLI to build your project , you...

Or, making it more explicit:

Alternatively, if you are using the Vue CLI to build your project (where you don't have a separate webpack config and your babel config is using the preset @vue/cli-plugin-babel/preset), you....

As I understand it, the guide is written from the perspective of having used a preset that defaults to using webpack/you have ejected from the Vue CLI and so you would doing something like npm webpack... rather than npm vue-cli-service...? But if you are using the CLI Service you get some of the config essentially for free and you can skip those sections. Which could lead to another way of explaning:

Alternatively, if you are using the Vue CLI to build your project (your scripts section in your package.json looks something like vue-cli-service build rather than webpack build), you...

Do you have any preferences?

Copy link
Member

@lmiller1990 lmiller1990 May 26, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am definitely in favor of encouraging people to use the cli. I see two groups of users:

  • beginner/intermediate, who just want to test their components. They should use the CLI.
  • advanced users, who want to configure things for more control. They are experienced with the toolchain, they will figure it out. It's unlikely they need significant docs or guidance.

Copy link
Contributor Author

@samgladstone samgladstone May 27, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So following that, we could go for the most straight forward option:

Alternatively, if you are using the Vue CLI to build your project , you...

People should know if they are using the CLI and so read on and advanced users can work out what applies to them. I'll push that in, but please let me know if you would like further changes.

Edit: all done!

P.s. thanks for the really helpful utils!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for your contribution!

>
> Skip to and then follow the instructions from [Processing Single-File Components in Jest](#processing-single-file-components-in-jest) to process your Vue Single-File Components.
>
> If you are transpiling with Babel (the default configuration when creating a new project), you will also need to add the JavaScript transform to the Jest config in your package.json as described in the section [Configuring Babel for Jest](#configuring-babel-for-fest), but then you should skip the rest of that section.

The first thing to do is install Jest and Vue Test Utils:

```bash
Expand Down