nuxt1迁移奥nuxt2_在Nuxt中使用Storybook

「爱情、让人受尽委屈。」 2023-02-21 14:25 45阅读 0赞

nuxt1迁移奥nuxt2

Nuxt.js has been a lot of fun to use in production web apps and side projects. It's simple, fast, and seems very in line with web standards when it comes to creating components, importing plugins, etc. Equally as exciting has been the rise of Storybook. It's gained quite a following in the last year for it's ease of use in creating component/pattern libraries and in it's ability to do component based snapshot testing in isolation.

Nuxt.js在生产Web应用程序和附带项目中使用非常有趣。 它简单，快速，并且在创建组件，导入插件等方面非常符合Web标准。Storybook的兴起同样令人兴奋。 去年，它易于创建组件/模式库，并且能够独立进行基于组件的快照测试，因此赢得了相当多的关注。

Recently I was wanting to start a new side project and wanted to use Storybook with Nuxt. I was excited to see their documentation on using Storybook with Vue (though React, React Native, and Angular are also supported) but as I was getting started found some bumps in the road. After pulling an all nighter and a few pull requests, I got everything working! [This is a repo of the final product][] and this the story of my journey that night.

最近，我想开始一个新的附带项目，并想将Storybook与Nuxt一起使用。 我很高兴看到他们关于将Storybook与Vue一起使用的文档(尽管还支持React，React Native和Angular)，但是当我入门时，发现了一些障碍。 拉了一个通宵和几个拉请求后，我一切正常！ [这是最终产品的回购，也是][This is a repo of the final product]我当晚旅行的故事。

## 背景 **(**Background**)** ##

For those unfamiliar with [Storybook][] (as I was a last week) or [Nuxt][] I'd like to share a bit about them. Nuxt is an objectively great framework for build applications. It's community driven, easy to learn, and plays well with existing projects that use Node.js. There's a lot of great projects out there using Nuxt and a few key developers that I'd suggest following for more info would be [Sarah Drasner][], [Evan You][], and [Rachel Nabors][]. Storybook has quickly grown in the last year to become an essential part of many teams testing suite and a great way of keeping track of component UI. The main premise is that after creating a component you [create it's "story"][create it_s _story]. The story will contain different states of a component which provides a visual representation. When you write multiple stories you have your Storybook.

对于那些不熟悉[Storybook][] (就像我上周一样)或[Nuxt的人，][Nuxt]我想与他们分享一些信息。 Nuxt是构建应用程序的客观上不错的框架。 它是社区驱动的，易于学习，并且可以与使用Node.js的现有项目很好地配合使用。 有很多使用Nuxt的出色项目，我建议跟随一些主要开发人员以获取更多信息，例如[Sarah Drasner][] ， [Evan You][]和[Rachel Nabors][] 。 去年，StorybookSwift增长，已成为许多团队测试套件中必不可少的一部分，并且是跟踪组件UI的绝佳方式。 主要前提是在创建组件之后，您将其[创建为“ story”][create it_s _story] 。 故事将包含提供视觉表示的组件的不同状态。 当您编写多个故事时，您便拥有了故事书。

## 安装和设置 **(**Installing and Setting Up**)** ##

This was starightforward. I use [vue-cli][] to create a new Nuxt project (specifically [the Express flavor][]) and then used [Storybook's documentation][Storybook_s documentation] on installing their package with Vue. In their documentation they show an example of a config file for Storybook. It discussed using Vuex as a plugin but that's not required to get things going. If you wanna start without the plugins for now you can [check out the config file in the repo][] of my journey.

这是明明的。 我使用[vue-cli][]创建一个新的Nuxt项目(特别[是Express风味][the Express flavor] )，然后使用[Storybook的文档][Storybook_s documentation]在Vue中安装其软件包。 在他们的文档中，他们显示了Storybook的配置文件示例。 它讨论了使用Vuex作为插件，但这并不是使事情顺利进行的必要条件。 如果您现在暂时不想使用插件，则可以[在][check out the config file in the repo]我[的回购][check out the config file in the repo]中[查看配置文件][check out the config file in the repo] 。

Storybook has built in "add-ons" that add a lot of value to the package. I was interested in getting the Action and Storyshot addons working. [Actions allow Storybook to display data from event handlers][] in a panel. It's especially useful when you're wanting to see what data is passed when a button in clicked or some other type of event is triggered through interaction with the UI. [Storyshots][] create a snapshot of the component in isolation so that as updates are made you can run a comparison test on components to ensure that there aren't unexpected changes to it's UI. If I'm honest, snapshot testing was a new term for me a week ago, but it's really proven to be useful. Under the hood Storyshots is using Jest to do it's testing. We'll get to my misadventure with Storyshots and Jest in a bit. If you're interested you can find a [full list of add-ons][], both native and community created, on their website.

Storybook内置了“附加组件”，可以为程序包增加很多价值。 我对使Action和Storyshot加载项起作用很感兴趣。 [动作允许Storybook][Actions allow Storybook to display data from event handlers]在面板中[显示事件处理程序][Actions allow Storybook to display data from event handlers]中的[数据][Actions allow Storybook to display data from event handlers] 。 当您想查看通过与UI的交互触发单击中的按钮或其他类型的事件时要传递什么数据时，此功能特别有用。 [Storyshots隔离地][Storyshots]创建组件的快照，以便[在进行][Storyshots]更新时可以对组件进行比较测试，以确保其UI不会发生意外更改。 老实说，快照测试在一周前对我来说是一个新名词，但事实证明它很有用。 引擎盖Storyshots正在使用Jest进行测试。 我们稍后将介绍Storyshots和Jest。 如果您有兴趣，可以在他们的网站上找到[完整的加载项列表][full list of add-ons] ，包括本地和社区创建[的加载项][full list of add-ons] 。

## 动作 **(**Actions**)** ##

The only part that I struggled with in setting up this addon was getting the package to run properly when I launched `npm run storybook`. This command is what starts the localhost server for Storybook's UI. Initally in doing this I ended up seeing a stories but no action panel, despite install storybook/addon-actions through NPM. Turns out I was missing an addons.js file from the .storybook directory. That file should look like this to import the add-ons you want to use within the Storybook UI:

在设置此插件时，我遇到的唯一困难是，当我启动`npm run storybook`时，使程序包能够正常`npm run storybook` 。 此命令将启动Storybook的UI的本地主机服务器。 最初，尽管通过NPM安装了故事书/附加动作，但最终还是看到了一个故事，但没有看到动作面板。 原来我从.storybook目录中丢失了addons.js文件。 该文件应如下所示，以导入要在Storybook UI中使用的加载项：

import '@storybook/addon-actions/register'
      import '@storybook/addon-links/register'

After adding that file the panel appeared but I still wasn't seeing actions appear when I clicked the button in the Button/template + methods story. I figured out through trial and error that changing [@click in the button template to :handle-click][click in the button template to _handle-click] would give the result I expected. I'm guessing that's because we are testing the component in isolation so the action panel is looking at changes in data and listening to event handlers inside that specific component. I've not confirmed this yet with the community, but I believe it make sense.

添加该文件后，面板出现了，但是当我单击“按钮/模板+方法”故事中的按钮时，仍然没有看到动作出现。 通过反复试验，我发现将[按钮模板中的@click][click in the button template to _handle-click]更改[为：handle-click][click in the button template to _handle-click]会得到预期的结果。 我猜这是因为我们正在隔离测试组件，因此操作面板正在查看数据更改并在特定组件内部侦听事件处理程序。 我尚未在社区中确认这一点，但我相信这是有道理的。

### Storyshots：第1轮 **(**Storyshots: Round 1**)** ###

This is where our journey turns rocky. To install the right packages I had to go a bit outside of [what is provided in the docs][]. Here's the full command to use for all the correct packages: `npm install --save-dev @storybook/addon-storyshots jest react-test-renderer jest-vue-preprocessor`. I'm still unsure why react-test-renderer is needed. I believe it's a bug but I'm still confirming that. At this point there were some errors and I submitted a couple of issues. While I waited for those answers, instead of going to sleep like a sane person, I decided to mess around with Jest a bit to do some end-to-end testing.

这就是我们的旅途艰难的地方。 要安装正确的软件包，我不得不超出[docs中提供的内容][what is provided in the docs] 。 这是用于所有正确软件包的完整命令： `npm install --save-dev @storybook/addon-storyshots jest react-test-renderer jest-vue-preprocessor` 。 我仍然不确定为什么需要react-test-renderer。 我相信这是一个错误，但我仍在确认。 此时存在一些错误，我提交了几个问题。 在等待这些答案时，我没有像一个理智的人那样睡觉，而是决定与Jest混在一起做一些端到端测试。

### 沿着兔子洞走下去 **(**Down the Rabbit Hole We Go**)** ###

I hadn't used Jest before and wanted to dig in a bit under the hood to see how it worked. I started by creating a [test/unit][test_unit] directory to hold the specs directory and some config files. Searching around I found a [repo by Brant Willis on GitHub][] that really helped resolve what the jest.config.js file should look like when working with Nuxt. Turns out this file would also be used by Storyshots later. (So maybe this wasn't a completely off topic decision!)

我以前没有使用过Jest，想深入挖掘一下它的工作原理。 我首先创建一个[test / unit][test_unit]目录来保存specs目录和一些配置文件。 到处搜索时，我[在GitHub上][repo by Brant Willis on GitHub]找到了[Brant Willis][repo by Brant Willis on GitHub]的[回购，][repo by Brant Willis on GitHub]它确实有助于解决使用Nuxt时jest.config.js文件的外观。 原来，此文件还将在以后的Storyshots中使用。 (因此，这可能不是一个完全脱离主题的决定！)

After sorting out the config I was able to get passing tests! I didn't do anything insane for the tests. There's plenty of tutorials online for creating tests with Jest. I created a simple test for each component, the default layout in Nuxt, and each page in Nuxt. When I tried running the test on Footer.vue I did receive an error. It ended up being due to Footer.vue not having a script area in the file.

整理完配置后，我可以通过测试！ 我没有为测试做任何疯狂的事情。 在线上有很多教程供您使用Jest创建测试。 我为每个组件，Nuxt中的默认布局以及Nuxt中的每个页面创建了一个简单的测试。 当我尝试在Footer.vue上运行测试时，确实收到了错误。 最终是由于Footer.vue在文件中没有脚本区域。

![Footer component error][]

### Storyshots：第2轮 **(**Storyshots: Round 2**)** ###

After figuring out Jest I still didn't have an answer to the submitted issues. In classic 3am logic, I decided to go searching again and I came across [a buried file in the Storybook official repo][]. This is the file needed to tell storyshots where to find the config file, what framework to use with Storybook, and some other peripheral options. I configured it for Vue but I was still running into errors. It was saying that storybook/react wasn't find, even though I set Vue as the framework. After using `npm install --save-dev storybook/react` all was well. (Yes, very odd.) When trying to run `npm test` it provided me with an `unexpected token` error. Something that wasn't documented well was the need to have a .babelrc file. Turns out it wasn't transpiling the code with Babel before running the tests. I ended up with [this .babelrc file][] after seeing [this issue in the jest-vue-preprocessor package][].

在弄清楚Jest之后，我仍然没有对提交的问题的答案。 按照经典的凌晨3点逻辑，我决定再次进行搜索，然后[在Storybook官方存储库中][a buried file in the Storybook official repo]发现[了一个埋藏的文件][a buried file in the Storybook official repo] 。 这是告诉Storyshots在哪里可以找到配置文件，Storybook使用哪种框架以及其他一些外围选项所需的文件。 我为Vue配置了它，但仍然遇到错误。 有人说找不到故事书/React，即使我将Vue设置为框架。 使用`npm install --save-dev storybook/react`一切都很好。 (是的，很奇怪。)尝试运行`npm test`它为我提供了`unexpected token`错误。 没有很好记录的是需要一个.babelrc文件。 事实证明，在运行测试之前，并没有使用Babel编译代码。 [在jest-vue-preprocessor软件包中][this issue in the jest-vue-preprocessor package]看到[此问题][this issue in the jest-vue-preprocessor package]后，我最终得到了[.babelrc文件][this .babelrc file] 。

The next half hour from here was a blur. When I snapped out of it I had really messed up the repo and decided to rollback to a commit that I knew was working. Also my wife woke up and told me I was typing too loud and to move to my office. \#truLove (Who thought this was a good idea?)

从这里出发的下半个小时很模糊。 当我退出时，我真的搞砸了回购协议，并决定回滚到我知道正在工作的提交。 我的妻子也醒来，告诉我我打字太大声，无法搬到我的办公室。 \#truLove(谁认为这是个好主意？)

After some caffine I realized that I had added a webpack.config.js file in .storybook that was overriding a lot of settings in the Nuxt config file. I put humpty dumpty back together again and knew I was getting close. After running `npm test` and trying a few different things I still got an error saying `storyshots is intended only to be used with storybook`. Turns out Storyshots is [available starting in Storybook 3.4.0-alpha.5][]. To update to that version I had to set the version for storybook-vue, storybook/addon-action, and storybook/addon-storyshots. I also figured out that @storybook/addon is required to get addons working. It appears it's a newer way of getting add-ons to work in an upcoming update.

经过一些咖啡因后，我意识到我已经在.storybook中添加了webpack.config.js文件，该文件将覆盖Nuxt配置文件中的许多设置。 我又把矮胖的矮胖子重新放在一起，知道自己快要接近了。 在运行`npm test`并尝试了一些其他操作之后，我仍然遇到错误，说`storyshots is intended only to be used with storybook` 。 事实证明Storyshots [从Storybook 3.4.0-alpha.5开始可用][available starting in Storybook 3.4.0-alpha.5] 。 要更新到该版本，我必须为Storybook-Vue，Storybook / Addon-Action和Storybook / Addon-Storyshots设置版本。 我还发现，必须使用@ storybook / addon才能使插件正常工作。 看来，这是使加载项在即将到来的更新中工作的较新方法。

When I ran `npm test` again I got the following:

当我再次运行`npm test`时，得到以下信息：

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<template>
                                                                                        ^
      SyntaxError: Unexpected token <
    
      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:318:17)
      at Object.<anonymous> (node_modules/@storybook/vue/dist/client/preview/render.js:24:21)
      at Object.<anonymous> (node_modules/@storybook/vue/dist/client/preview/index.js:32:15)

[Thanks to the community at Storybook][] I found out that there was a workaround to the this bug by adding the following to jest.conf.js

[多亏了Storybook上的社区，][Thanks to the community at Storybook]我才发现此bug有一个解决方法，方法是将以下内容添加到jest.conf.js中

transformIgnorePatterns: [
        '/node_modules/(?!(@storybook/.*\\.vue$))',
      ],

And TA-DA!!! It works!

还有TA-DA！ 有用！

### 随着太阳升起... **(**As the Sun Began to Rise...**)** ###

I was really excited to see it working. Turns out my Jest tests were creating snapshots for my specs and Storyshots was creating snapshots of the stories. It also comes with coversage stats which was a nice easter egg. Though I'm not sure why I only get 50% coverage on my Button.vue file. (Anyone know why? Leave a comment!) Along the way I found [a great resource for Jest specs with Vue][]. I'm excited to dig in more with the specs and play around with a few more add-ons for Storybook.

看到它起作用，我感到非常兴奋。 事实证明，我的Jest测试是为我的规格创建快照，而Storyshots是为故事创建快照。 它还带有覆盖率统计信息，这是一个不错的复活节彩蛋。 虽然我不确定为什么我的Button.vue文件仅获得50％的覆盖率。 (有人知道为什么吗？发表评论！)在此过程中，我发现[Vue提供了有关Jest规范的大量资源][a great resource for Jest specs with Vue] 。 我很高兴能深入了解这些规范，并为Storybook玩一些附加组件。

Feeling invincible and extremely worn out, I decided to close the laptop and lay down for some rest. And that's when I heard it...the cry of my 2 year old daughter, the whine of a grouchy 4 year old little boy, and the loud barking of a puppy needing to go outside. Seriously...whose idea was this?!

感到无敌且极度疲惫，我决定关闭笔记本电脑，躺下休息。 就在那时，我听到了……我2岁的女儿的哭泣，一个4岁的脾气暴躁的小男孩的boy吟，以及一只需要外出的小狗的吠叫声。 认真...这是谁的主意？

> 翻译自: [https://davidwalsh.name/storybook-nuxt][https_davidwalsh.name_storybook-nuxt]

nuxt1迁移奥nuxt2

[This is a repo of the final product]: https://github.com/derekshull/nuxt-starter-kit-v2
[Storybook]: https://storybook.js.org/
[Nuxt]: https://nuxtjs.org/
[Sarah Drasner]: https://twitter.com/sarah_edo
[Evan You]: https://twitter.com/youyuxi
[Rachel Nabors]: https://twitter.com/rachelnabors
[create it_s _story]: https://storybook.js.org/basics/writing-stories/
[vue-cli]: https://github.com/vuejs/vue-cli
[the Express flavor]: https://github.com/nuxt-community/express-template
[Storybook_s documentation]: https://storybook.js.org/basics/guide-vue/
[check out the config file in the repo]: https://github.com/derekshull/nuxt-starter-kit-v2/blob/master/.storybook/config.js
[Actions allow Storybook to display data from event handlers]: https://github.com/storybooks/storybook/tree/master/addons/actions
[Storyshots]: https://github.com/storybooks/storybook/tree/master/addons/storyshots
[full list of add-ons]: https://storybook.js.org/addons/addon-gallery/
[click in the button template to _handle-click]: https://github.com/derekshull/nuxt-starter-kit-v2/blob/f56e33310eaedf0dd28e4db4d9fd7ae4b0ff0253/components/Button.vue#L2
[what is provided in the docs]: https://github.com/storybooks/storybook/tree/master/addons/storyshots#getting-started
[test_unit]: https://github.com/derekshull/nuxt-starter-kit-v2/tree/master/test/unit
[repo by Brant Willis on GitHub]: https://github.com/brantwills/nuxt-ts-jest-starter-template/blob/master/template/test/unit/jest.conf.js
[Footer component error]: https://raw.githubusercontent.com/derekshull/nuxt-starter-kit-v2/master/images/footer-component-error.png
[a buried file in the Storybook official repo]: https://github.com/storybooks/storybook/blob/master/examples/official-storybook/tests/storyshots.test.js
[this .babelrc file]: https://github.com/derekshull/nuxt-starter-kit-v2/blob/master/.babelrc
[this issue in the jest-vue-preprocessor package]: https://github.com/vire/jest-vue-preprocessor/issues/47
[available starting in Storybook 3.4.0-alpha.5]: https://github.com/storybooks/storybook/issues/2797
[Thanks to the community at Storybook]: https://github.com/storybooks/storybook/issues/2800
[a great resource for Jest specs with Vue]: https://alexjoverm.github.io/2017/08/21/Write-the-first-Vue-js-Component-Unit-Test-in-Jest/
[https_davidwalsh.name_storybook-nuxt]: https://davidwalsh.name/storybook-nuxt