如何使用反应单元测试在多层自定义组件上触发事件

Question

我正在为我正在单元测试的功能编写测试用例。我想编辑嵌入在多个自定义组件中的文本字段，但我不知道如何访问它：

TestFile.test.tsx

it('should be able to change quantity', () =>{
  //Mock out dependent function with jest
  //Nothing here right now


  //Render with the props you want
  render(        
        <MainComponent /> );

  //Locate screen components for test
  const counter = screen.queryByTestId("counter");

  //Perform user actions
  fireEvent.change(counter, 4);   <--This is the line where I'm trying to access what I want

  //Measure against expect cases
  expect(counter).toBe(4);
});

MainComponent.tsx

这是我试图访问的组件。问题是，`fireEvent.change` 不起作用，因为它是一个自定义组件。至少，我认为这就是它不起作用的原因。

<Counter
  data-testid='counter'    <--data-testid is here right now
  containerMargin={{ marginTop: -5 }}
/>

Counter.tsx

`Counter` 内部是另一个自定义组件，`TextField`

<TextField
     {...props}
/>

TextField.tsx

在 TextField 内部是我要访问的文本输入：

<TextInput
  {...props}
/>

错误信息

当我尝试运行测试时，我收到此错误：

  ●  Test › should be able to change quantity

Unable to fire a "change" event - please provide a DOM element.

  189 |
  190 |     //Perform user actions
> 191 |     fireEvent.change(counter, 4);
      |               ^
  192 |
  193 |     //Measure against expect cases
  194 |     expect(counter).toBe(4);

我不能将data-testid 属性放入TextField 或TextInput 本身，因为在我正在测试的页面的呈现中还有另一个Counter。任何建议或故障排除都会有所帮助，谢谢！

Answer 1

The getByTestId query is an escape hatch.

本着指导原则的精神，建议仅在其他查询不适用于您的用例之后才使用它。使用 data-testid 属性与您的软件的使用方式不同，应尽可能避免使用。

您的文本字段应该可以访问。并且应该利用accessibility 来访问该元素。

const input = screen.getByRole('textbox', {name: t('priceMultiple')})
// or
const input = screen.getByLabelText(t('priceMultiple'))

Using fireEvent directly is also an escape hatch.

大多数项目都有一些fireEvent 的用例，但大多数时候您可能应该使用@testing-library/user-event。

in the user-event docs 和 in this blog post 进一步解释了此建议。

await userEvent.type(input, '4')

请注意，在大多数情况下，建议设置用户事件实例并描述用户在组件上执行的确切工作流程。所以大多数测试应该是这样的。

const user = userEvent.setup()
render(<MyComponent/>)

await user.tripleClick(screen.getByRole('textbox', {name: /some label/}))
await user.keyboard('4')

// ... assert that the component output is correct ...

await user.tab()
await user.keyboard('567') // edit another field

// ... perform more assertions ...

Answer 2

一般来说，你是对的，将data-testid 添加到 React 组件是没有用的，除非你将此 prop 向下传播到 DOM 元素。 幸运的是，<TextField /> 接受 inputProps 并将其传播到 <input /> 元素。

例如

export default function BasicTextFields() {
  return (
    <ChildComponent data-testid="counter" />
  );
}

const ChildComponent = (props) => {
  return (
    <TextField
      inputProps={{ "data-testid": props["data-testid"] }}
      id="outlined-basic"
      label="Outlined"
      variant="outlined"
    />
  );
};

然后你可以在测试中使用getByTestId。

test("should be able to trigger input change", () => {
  render(<BasicTextFields />);
  const input = screen.getByTestId("counter");
  fireEvent.change(input, { target: { value: "23" } });
  expect(input.value).toBe("23");
});

https://codesandbox.io/s/flamboyant-joliot-0f49v?file=/src/App.js

我没有创建您创建的深层层次结构以使我的答案更清晰，但只要您将道具传播到<TextField />，您应该会很好。您也可以使用Context，但这超出了此答案的范围。