更新日志：前端版

我上周在推特上发布了我们迁移到 Preact X 和测试库的消息。

让我们深入了解我们在前端所做的所有改进。

Preact X

DEV 目前正在运行 Preact X（撰写本文时版本号为 10.4.4）。我按照官方的 Preact X 升级指南，从 8.5.2 升级到了 10.4.4。那么，新版 Preact 究竟能为开发者带来什么呢？您可以在 Preact 网站上的“Preact X 新功能”
componentDidCatch一文中了解所有新功能。简而言之，许多之前仅在 React 中提供的功能现在也已在 Preact 中实现，例如 hooks、fragments、context 等等。

测试库

DEV 已放弃preact-render-spy和preact-render-to-json，原因有几个。主要原因是这两个工具都无法与 Preact 升级兼容。其次，React 官方文档推荐使用react-testing-library和Jest作为处理 React 组件的首选工具。出于这些原因，我们迁移到了preact-testing-library ，这个项目也是Testing Library家族的一部分。

作为此举的一部分，我们弃用了快照测试，但设计系统组件除外。我对测试库还不太熟悉，但发现它相当直观，并且鼓励构建可访问的应用程序。我也非常喜欢这个debug()功能。

无障碍 (a11y) 测试

测试库鼓励构建可访问的应用程序，但我们可以做得更多。Nick Colley从Deque Systems中选取了出色的 aXe 工具，并将其与 Jest 集成，形成一个名为jest-axe的自定义 Jest 匹配器，用于测试可访问性。

当 jest-axe 与 preact-testing-library 结合使用时，我们会收到 a11y 错误通知，以便我们修复它们。DEV 代码库中所有与 Preact 组件相关的测试都会针对 a11y 错误进行测试。

组件测试文件中的典型 a11y 测试如下所示。

  it('should have no a11y violations', async () => {
    const { container } = render(
      <MyComponent />,
    );
    const results = await axe(container);

    expect(results).toHaveNoViolations();
  });

当此测试失败时，您将看到可读错误以修复 a11y 问题。

expect(received).toHaveNoViolations(expected)

    Expected the HTML found at $('.crayons-btn--icon') to have no violations:

    <button class="crayons-btn crayons-btn--outlined crayons-btn--icon" type="button" data-testid="subscription-settings">

    Received:

    "Buttons must have discernible text (button-name)"

    Fix any of the following:
      Element does not have inner text that is visible to screen readers
      aria-label attribute does not exist or is empty
      aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
      Element's default semantics were not overridden with role="presentation"
      Element's default semantics were not overridden with role="none"
      Element has no title attribute or the title attribute is empty

    You can find more information on this issue here: 
    https://dequeuniversity.com/rules/axe/3.5/button-name?application=axeAPI

更多前端更新！

故事书更新

五月份，我写了一篇关于我们使用 Storybook 的更新文章。

更新日志：DEV 为您带来一些故事

Nick Taylor 代表 DEV Team ・ 2020 年 5 月 22 日

#html #css #javascript #storybook

从那时起，我们一直使用 Storybook 构建设计系统组件和一些关键的应用组件。迁移到 Preact X 后，我们终于可以使用一些更强大的 Storybook 插件了。我之前提到过 a11y 测试，因此为了补充这一点，我们添加了Storybook a11y 插件。

除此之外，我们还有一个自定义的Storybook 装饰器，允许您更改 DEV 主题，以便您可以确保为我们支持的每个主题正确构建内容。

您可以在此处查看 DEV 正在进行的 Storybook 工作。每次合并到我们主分支的与 Storybook 故事相关的内容时，都会部署更新的 Storybook，因此您看到的始终是最新、最棒的。借助Netlify部署预览功能，您可以查看与每个 PR 相关的 Storybook！🔥

Jest 的改进

我们的 Jest 设置没有太大变化，只是做了一些调整。首先，随着我们在前端的测试越来越多，代码覆盖率也随之提高。因此，我们希望在覆盖率上升的同时避免覆盖率下降，因此我们在 Jest 配置中添加了覆盖率阈值。

module.exports = {
  ...
  coverageThreshold: {
    global: {
      statements: 40,
      branches: 35,
      functions: 39,
      lines: 41,
    },
  },
...

另一个超级便捷的新增功能是 Jest 监视模式。现在您可以按测试名称或文件名进行筛选。

就这些吗？没错。你肯定在开玩笑。😆

更新了 Linting 规则

之前，我们一直使用AirBnB 风格指南作为所有前端代码检查的基础。虽然这是一个很棒的项目，但我们发现其中的规则有些死板。因此，我们决定使用ESLint 推荐规则集和Preact 推荐规则集。

提醒一下，我们在项目中使用Prettier ，以便处理前端文件的所有格式。

非常感谢我的同事@ridhwana帮助我将所有测试迁移到 preact-testing-library。👏 我对我们在前端所做的所有改进感到非常兴奋，并期待继续改进它。如果您想为前端项目做出贡献，请随时在 DEV、Twitter 或任何其他平台上给我发私信。我的用户名是@nickytonline ，几乎无处不在。如果您喜欢电子邮件，请通过nick@dev.to与我联系。

各位，现在就这些了！