标签: react-testing-library

我正在测试我的应用程序并遇到问题。当尝试测试Dropdown组件中的行是否对悬停施加效果时，我注意到我无法检查元素的背景颜色，我觉得这很奇怪。

尝试使用 jest-dom matcher "toHaveStyle()"，下面是一个示例，我一生都无法让它工作。

下拉菜单.test.tsx

test('Should contain clickable elements that change style when hovered', () => {
    const dropElement1 = screen.getByLabelText('testLabel1');
    expect(dropElement1).toHaveStyle('background: white');
});

错误

我还尝试过使用background-color、使用十六进制值（另一个有趣的错误是 PrettyDom 将十六进制转换为 RGB），或者添加到toHaveStyle().

我确信该元素确实是白色的，但我不明白出了什么问题。如果我的方法是不好的做法，并且您对如何检查这一点有更好的了解，或者您对我的问题有解决方案，请告诉我！

jest以下是在我的一个组件上运行的输出：

----------------------------|---------|----------|---------|---------|-------------------
File                        | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------------------------|---------|----------|---------|---------|-------------------
All files                   |     100 |      100 |      50 |     100 |                   
 search-suggestion-base.tsx |     100 |      100 |      50 |     100 |                   
----------------------------|---------|----------|---------|---------|-------------------
...
Jest: "global" coverage threshold for functions (100%) not met: 50%

请注意，这% Funcs不是 100，测试失败。（覆盖率阈值不是我设定的。我不会设定这么高的阈值。）

问题是，Jest 没有告诉我哪些是未覆盖的线。此外，我也很难弄清楚 的含义是什么% Funcs。我什至找不到这方面的官方文档% Funcs。

任何帮助表示赞赏！

我该如何解决这个问题。我只是想创建一个测试来确保该组件呈现，但由于某种原因，即使该组件已经在内部，仍然会出现此问题<Router>。

我在这里读过其他类似的问题，答案都说将组件放入<Router/>，但这对我来说似乎不是问题。请告诉我我错过了什么？

** 我的应用程序.tsx**

import './App.scss';
import { AuthContexProvider } from './Utils/Contexs/AuthContext';
import { Routes, Route } from 'react-router-dom';
import { LogoLarge } from './Components/Logo/Logo';
import { SignInView } from './Views/SignInView';
import { ErrorPage } from './Views/ErrorView';
import { SignUpView } from './Views/SignUpView';
import { SwipeView } from './Views/SwipeView';
import { ResetPasswordView } from './Views/ResetPasswordView';
import { CreateProfileView } from './Views/CreateProfileView';
import { PrivateRoute } from './Utils/PrivateRoute';
import { ProfileView } from './Views/ProfileView';
import { SwipeContexProvider …

我想测试我为导航创建的侧边栏是否有效，这是我所做的一个简单示例

<ul>
  <li><Link to="/location1">location 1</Link></li>
  <li><Link to="/location2">location 2</Link></li>
</ul>

这是我的测试

const routerWrapper = ({children}) => <BrowserRouter>{children}</BrowserRouter>

// The first one runs fine
it('navigation to location 1' , () => {
render(<SideBar/> , {wrapper:routerWrapper})
// get the element and click on it
// check if title of page is correct
})

it('navigation to location 2' , () => {
render(<SideBar/> , {wrapper:routerWrapper})
// can't run because location is at /location1
})

当我使用 RTL 测试导航时，第一个测试运行良好，但之后位置仍保留在该目录中以进行下一个测试，如何在每次测试后清除位置？或者有什么建议我应该如何测试导航？

\n我正在学习 React 测试，但 fireEvent 不会改变我输入的值。无奈，不知道为什么？

我正在渲染 BuyPlace 组件。在这个组件中，我有一个包含输入组件的表单（这些组件只是带有输入的标签，我将道具传递给表单上的这个组件）。

在 screen.debug() 上，我可以看到我的组件是使用此表单和所有这些输入正确呈现的。

另外，我的输入在我的测试中被正确捕获，我检查了这一点。

这是我的测试：

test("should change input value", async () => {\nrender(\n<HashRouter>\n<UserContext.Provider value={{ user: true }}>\n<BuyPlace />\n</UserContext.Provider>\n</HashRouter>\n);\nconst nameInputEl = screen.getByPlaceholderText("Podaj w\xc5\x82asn\xc4\x85 nazw\xc4\x99");\nfireEvent.change(nameInputEl, {\ntarget: { value: "Micha\xc5\x82" },\n});\nawait waitFor(() => {\nexpect(nameInputEl.value).toBe("Micha\xc5\x82");\n});\n});\n

测试未通过。当然，我的应用程序运行正常，但在测试中它不起作用。

这是我的组件上的handleInputChange：

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => {\nsetInputValues((prevValues) => {\nreturn {\n...prevValues,\n[e.target.name]: e.target.value,\n}\n});\n};\n

我发现的每个解决方案都不起作用...我的输入值始终是空字符串。有人可以帮我弄这个吗？我想学习编写好的测试，但我不知道问题出在哪里。

编辑\n我在 screen.debug() 上看到了一些有趣的东西。

我在测试中的输入在没有 onchange 属性的情况下呈现，这在测试中正常吗？看一下这个：

                   <input\n                    id="name"\n                    name="name"\n                    placeholder="Podaj w\xc5\x82asn\xc4\x85 nazw\xc4\x99"\n                    type="text"\n …