使用反应测试的问题.材料库.用户界面
使用反应测试的问题.材料库.用户界面
提问于 2018-12-05 20:30:18
试着用react测试库编写我的第一个测试，但是它似乎没有抓住正确的资料-ui元素。
https://codesandbox.io/s/lx5nl1839z
我收到错误消息说事件从未被触发。
预期的模拟函数被调用了一次，但它被称为零次。
当我从material中将button更改为常规按钮而不是button时，它就能工作了。
这是我的测试
test('calls with user email and password', () => {
const login = jest.fn();
const error = null as any;
const { getByLabelText, getByText } = render(
<LoginForm login={login} error={error} />
);
const email = getByLabelText('Email');
const password = getByLabelText('Password');
(email as any).value = 'leoq91@gmail.com';
(password as any).value = 'password';
fireEvent.click(getByText('Login'));
expect(login).toHaveBeenCalledTimes(1);
expect(login).toHaveBeenCalledWith({
email: 'leoq91@gmail.com',
password: 'password',
});
});这是我的组成部分：
export const LoginForm: FunctionComponent<IProps> = ({ login, error }) => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
return (
<Paper style={{ width: '400px', padding: '30px', margin: '0 auto' }}>
<form
onSubmit={e => {
e.preventDefault();
return login({ email, password });
}}
>
<TextField
id="email"
label="Email"
onChange={e => setEmail(e.target.value)}
fullWidth
variant="outlined"
error={Boolean(getEmailError(email))}
helperText={getEmailError(email)}
/>
<TextField
id="password"
label="Password"
type="password"
style={{ marginTop: '10px' }}
onChange={e => setPassword(e.target.value)}
fullWidth
variant="outlined"
/>
<LoginError error={error} />
<Button
variant="contained"
color="primary"
type="submit"
fullWidth
// disabled={isDisabled(email, password)}
style={{
margin: '20px 0px',
}}
>
Login
</Button>
</form>
<Divider />
<Typography style={{ margin: '10px auto' }}>Forgot password?</Typography>
</Paper>
);
};回答 4
Stack Overflow用户
回答已采纳
发布于 2018-12-07 06:24:50
首先，密码箱不可靠.
codesandbox正在浏览器中运行测试，而不是在jsdom中运行。
下面是问题：https://github.com/kentcdodds/react-testing-library/issues/234
之所以这样做，是因为它是单击submit span，而不是单击按钮。它本该冒出来的，但事实并非如此。
下面是我的本地服务器的一个工作示例，其中包含了类型记录。
test('calls with user email and password', () => {
const login = jest.fn();
const { getByLabelText, container } = render(
<LoginForm login={login} error={null} />
);
const emailNode = getByLabelText('Email');
const passwordNode = getByLabelText('Password');
if (
emailNode instanceof HTMLInputElement &&
passwordNode instanceof HTMLInputElement
) {
fireEvent.change(emailNode, { target: { value: 'leoq91@gmail.com' } });
fireEvent.change(passwordNode, { target: { value: 'password' } });
const form = container.querySelector('form') as HTMLFormElement;
form.dispatchEvent(new Event('submit'));
expect(login).toHaveBeenCalledTimes(1);
expect(login).toHaveBeenCalledWith({
email: emailNode.value,
password: passwordNode.value,
});
} else {
expect(false);
}
});Stack Overflow用户
发布于 2018-12-07 06:18:48
你的TextFields不受控制。您应该在change事件中传递实际值并设置实际值。你在你的测试中提交了两次。
使用这些补丁运行测试具有正确的控制台输出，但出于某种原因，codesandbox忽略了jest。我不知道那是怎么回事，但有了上面的修正，它的要旨就奏效了。
Stack Overflow用户
发布于 2021-02-15 23:13:56
我已经在这上面做了一段时间了，最后得到了一些东西来将数据--在输入上进行验证，而不是在它周围的div中组成了material中的TextField。
应该将data-testid设置在inputProps中，如下所示：
<TextField
type="password"
variant="outlined"
required
value={password}
onChange={onChangePassword}
inputProps={{
'data-testid': 'testPassword'
}}
/>然后您可以像这样在测试中访问它，并模拟一个新的用户输入：
const passwordInput = getByTestId('testPassword');
fireEvent.change(passwordInput, { target: { value: VALID_PASSWORD } });页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53640257
复制相关文章
相似问题
腾讯云开发者
