Question

尝试使用react-testing-library编写我的第一个测试，但似乎无法抓住正确的material-ui元素。

我收到错误消息，说该事件从未触发过。

预期模拟函数被调用了一次，但被调用了零次。

当我将button更改为常规按钮而不是材质ui中的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>
  );
};

Answer 1

您的文本字段不受控制。您应该传递实际值并在change事件中设置实际值。您目前在测试中两次提交。

使用这些修复程序运行测试具有正确的控制台输出，但是由于某些原因，codeandbox会忽略玩笑匹配器。我不知道发生了什么事，但是通过上面的修复，它的要旨起作用了。

Answer 2

我已经考虑了一段时间，终于得到了一些东西，可以将 data-testid 放在输入上，而不是将它周围的 div 放在组成 material-ui 中的 TextField 上。

您应该像这样在 inputProps 中设置 data-testid：

<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 } });

Answer 3

我看到许多人在材料UI方面遇到问题。我的猜测是Button试图做一些别致的事情，并破坏了正常的HTML事件流。

我的建议是改为使用jest.mock()和模拟Button来渲染button。

Answer 4

首先，codesandbox不可靠...

codesandbox以某种方式在浏览器而不是jsdom中运行测试。

这是问题所在： https://github.com/kentcdodds/react-testing-library/issues/234

其要点是因为它是单击submit跨度而不是按钮。它应该冒泡了，但事实并非如此。

这是我的本地服务器使用Typescript的有效示例。

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);
    }
  });

使用material-ui与react-testing-library一起工作的问题

4 个答案: