40

我似乎找不到关于我想要实现的这个非常简单的事情的太多/任何文档

我有一个下拉菜单display: none。当我单击一个复选框时，display: block 我想要断言的只是当我单击该复选框时，它会显示下拉列表

 expect(getByLabelText('Locale')).toHaveStyle(`
  display: none;
`)

getByLabelText('Locale').checked = true

expect(getByLabelText('Locale')).toHaveStyle(`
  display: block;
`)

代码按预期工作，但测试在第二个期望块上失败说：它仍然应该是display: none

是断言的正确方法吗？

当我单击复选框时，它会更新我的对象中的 2 个属性，true这就是它在代码中呈现的方式。当我手动通过这些属性时，测试仍然失败，但它在第一个期望中失败了。

我觉得我需要做类似的事情setProps

我现在尝试使用renderWithRedux，但它似乎没有正确触发我的动作创建者？

fireEvent.click(queryByTestId('LocaleCheckbox'))尝试更新复选框是最好的选择吗？

4

2 回答 2

56

要使用 选中或取消选中复选框react-testing-library，您只需fireEvent.click选中复选框。在 react-testing-library 问题 #175 上对此进行了讨论。特别是，kentcdodds 说：

这可能应该更好地记录下来，但是对于实际上不会触发更改事件的复选框，您应该触发点击事件。

但是，根据您上面编写的代码，带有标签文本“Locale”的节点是什么？因为如果它有 style display: none，你的用户将如何点击来检查它？那是错字吗？您应该在下拉列表中声明样式，但单击您的复选框。也许我看错了，但从您的代码看来，您正在同一个节点上执行所有断言和操作。这似乎不对。

我编写了一个 CodeSandbox 示例，该示例具有基本div样式，其样式设置为display: none或display:block基于复选框是否被选中。它用于react-hooks维护状态。

还有一个react-testing-library测试演示了对样式进行断言，选中复选框，然后断言更改的样式。

测试代码如下所示：

it('changes style of div as checkbox is checked/unchecked', () => {
  const { getByTestId } = render(<MyCheckbox />)
  const checkbox = getByTestId(CHECKBOX_ID)
  const div = getByTestId(DIV_ID)
  expect(checkbox.checked).toEqual(false)
  expect(div.style['display']).toEqual('none')
  fireEvent.click(checkbox)
  expect(checkbox.checked).toEqual(true)
  expect(div.style['display']).toEqual('block')
  fireEvent.click(checkbox)
  expect(checkbox.checked).toEqual(false)
  expect(div.style['display']).toEqual('none')
})

希望这有助于为您指明正确的方向。

编辑复选框改变样式

于 2019-03-15T08:40:17.080 回答
1

我正在使用 "react-test-renderer": "^17.0.2". 我已经设法用一个简单的方法来做同样的事情：

getByTestId("data-testid").click()

这是获取的代码getByTestId：

const {getByTestId} = render(<Checkbox
        onClose={jest.fn()}
        onSave={onSave}
    />)
于 2021-06-02T12:08:37.983 回答