小编Eri*_*ric的帖子

我正在开发一个 React 项目，该项目使用 SASS（SCSS 语法）进行样式设置，并使用 Jest 进行单元测试。我在项目中测试样式时遇到问题。这是一个简单的例子：

在 component.js 中（导入单独的样式表）...

const Component = () => {
     return (
        <div className="greeting">Hello</div>
     )
}

在我的 .scss 文件中...

.greeting {
    background-color: red;
}

在我的测试文件中...

test('background color should be red', () => {
    render(<Component />);
    expect(screen.getByText('Hello')).toHaveStyle('background-color: red');
})

测试失败并显示：

expect(element).toHaveStyle()

    - Expected

    - background-color: red;

但是，如果我使用内联样式 ( <div style={{backgroundColor: red}}>Hello</div>)，测试就会通过。

有人遇到过这个问题吗？我还想知道其他人在 Jest 中测试样式的方法（特别是当您的样式保存在单独的 .scss 文件中时）

我正在利用screenfrom@testing-library/dom和renderfrom@testing-library/react进行测试。

我正在开发一个 JS Web 应用程序，并尝试使用文件exports中的字段package.json来清理模块的导入语句。

这是我的目录结构：

--> my-package-folder
   --> src
      --> index.js
      --> color
         --> index.js
     --> ui
        --> index.js

我希望能够像这样导入color和子文件夹：ui

import * from '@project/my-package/color'
import * from '@project/my-package/ui'

// Instead of...
// import * from '@project/my-package/src/color/index.js'
// import * from '@project/my-package/src/ui/index.js'

这是我的 package.json 中的一个片段：

  "name": "@project/my-package",
  "version": "1.0.0",
  "main": "./src/index.js",
  "type": "module",
  "exports": {
    "./color": "./src/color/index.js",
    "./ui": "./src/ui/index.js"
  },

color由于某种原因，我在尝试导入子文件夹时收到“无法解析”错误ui：

Module not found: Error: Can't resolve '@project/my-package/color'

导入的代码my-package仍然能够 …

我正在 Jest 中为 React 应用程序编写测试。假设我有一个网页包含多个特定元素。在下面的例子中，我有两个按钮。我想在测试中查询测试 ID 为 2 的 div 元素内部的按钮。

有没有办法让我在该父 div 的上下文中查询该按钮？就像是：

const secondDiv = screen.getByTestId(2);
const buttonOfInterest = secondDiv.getByRole('button', {name: 'Button'});

我之前已经尝试过上面的方法，但它不起作用。

我知道我可以将测试 ID 分配给按钮，但我认为在其他场景中能够在特定元素的上下文中进行查询（而不是使用screen，它引用整个文档）会非常有帮助。

我已经使用npm run deploy. 现在，我在我的master分支上对我的项目进行了新的更改并将它们推送到远程master分支。但是，这样做似乎不会更新我的 Github 页面。我错过了什么步骤？我需要重新运行npm run deploy吗？

我正处于一个新应用程序的早期阶段，到目前为止只使用 vanilla JS。我正在尝试将 ES6 模块用于我的 Jest 单元测试，因此我遵循了2020 年更新的说明来实现这一点。

但是，按照这些说明操作后，ReferenceError: jest is not defined运行单元测试时出现错误。

这是我的 package.json：

{
  "version": "1.0.0",
  "main": "app.js",
  "type": "module",
  "jest": {
    "testEnvironment": "jest-environment-node",
    "transform": {}
  },
  "scripts": {
    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
    "start": "node server.js"
  },
  "license": "ISC",
  "devDependencies": {
    "express": "^4.17.1",
    "jest": "^26.6.3",
    "jest-environment-node": "^26.6.2",
    "open": "^7.3.0"
  },
  "dependencies": {}
}

下面是我的测试文件。由于 jest.fn 调用而发生错误：

import { getTotalNumPeople } from "./app.js";


test("Get total number of people", async () => {
    global.fetch = jest.fn(() …

我想练习创建自己的 RESTful API 服务，以配合我创建的客户端应用程序。我的计划是使用 Node 和 Express 来创建服务器。在我的本地计算机上，我知道如何设置本地服务器，但我希望能够在线托管我的应用程序（客户端和服务器）作为我的投资组合的一部分。

我的客户端应用程序发送到服务器的数据大小不会很大，因此不需要数据库。只需让我的服务器将接收到的数据动态保存在数组中就足够了，并且如果用户退出网页，我不会关心该数据是否持续存在。

是否可以使用 Netlify 之类的服务来托管客户端和服务器以实现我的目的？我正在想象类似如何在我的计算机上启动本地开发服务器以便前端可以与其交互的方式。但现在我希望所有内容都在线托管以供其他人查看。我计划在与前端代码相同的存储库中创建 Express 服务器。