我正在学习Jest和React,并尝试使用Material UI。我写这个简单的测试只是为了检查事情是如何工作的:
import React from 'react';
import { render, fireEvent, configure} from '@testing-library/react';
import { TextField } from '@material-ui/core';
configure({ testIdAddribute: 'id' });
describe('Testing events', () => {
test('onChange', () => {
const onChangeMock = jest.fn();
const { getByTestId } = render(
<TextField id="test" onChange={onChangeMock} type="text" />
);
fireEvent.change(getByTestId('test', { target: { value: 'foo' } }));
expect(onChangeMock.mock.calls.length).toBe(1);
});
});
但这次测试失败了:
expect(received).toBe(expected) // Object.is equality
Expected: 1
Received: 0
我在这里不明白什么?
getByTestId()
将查找data-testid
属性,而不是id
。尝试从更改代码
<TextField id="test" onChange={onChangeMock} />
至
<TextField inputProps={{ 'data-testid': 'test' }} onChange={onChangeMock} />
现在在你的代码
fireEvent.change(getByTestId('test', { target: { value: 'foo' }})); expect(onChangeMock.mock.calls.length).toBe(1);
模拟用户按键时,应使用@testing-library/user-event
并调用user.type()
,而不是手动触发onChange
事件。
您还可以使用.toHaveBeenCalledTimes(number)
匹配器来断言函数被调用的次数。
最后,您应该使用getByRole()
而不是getByTestId()
,因为用户将看到元素的TextField
(getByRole('textbox')
(,而不是只有在检查元素时才能看到的data-testid
属性。
请参阅"我应该使用哪个查询?"?了解更多关于RTL的哲学。
把它放在一起,你会得到这样的东西:
import { screen } from '@testing-library/dom'
import user from '@testing-library/user-event'
...
const onChangeMock = jest.fn();
render(<TextField onChange={onChangeMock} />);
const input = screen.getByRole('textbox')
user.type(input, 'foo')
expect(onChangeMock).toHaveBeenCalledTimes(3);