React 测试库未更新输入字段中的 state

Question

我是 RLT 的新手，在我尝试为输入框编写单元测试时遇到了这个奇怪的事情，RTL 只是不会更新 state 的输入值，这是我的测试代码：

import { fireEvent, screen } from '@testing-library/dom';
import { act, render, waitFor } from '@testing-library/react';
import React from 'react';
import { Component } from './Component';
    
describe('search input', () => {
  it('should update input field', async () => {
     const { getByTestId } = render(
        <Component />
      );
    
    const inputElement = getByTestId('search-text-input');
    expect(inputElement).toBeInTheDocument();
    expect(inputElement).toHaveValue('');
    const country = 'usa';
    await waitFor(() => {
      fireEvent.change(inputElement, { target: { value: country } });
    });

    expect(getByTestId('search-text-input').value).toBe(country);
   });
});

这是我的反应代码：

import React, { useState } from 'react';

export const Component = () => {
  const [search, setSearch] = useState<string>('');

  const onNameChange = React.useCallback((e) => {
    console.log('onNameChange...', e.target.value);
    setSearch(e.target.value);
  }, []);

  return (
      <input
        data-testid={'search-text-input'}
        autoComplete="off"
        name="search-input"
        onChange={onNameChange}
        size="medium"
        value={search}
        placeholder={'Search'}
      />
  );
};

如您所见，在我的 React 代码中，当运行测试时，第 7 行已经打印出“usa”，这是我在测试中传递的值，但似乎 RTL 只是卡在这里，不会更新 state。

如果有什么帮助，项目本身在 next.js，我拥有的依赖版本是：

"@testing-library/dom": "^8.18.1",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@types/jest": "^29.0.3",
"@types/node": "18.7.18",
"@types/react": "18.0.21",
"@types/react-dom": "18.0.6",
"react": "18.2.0",
"react-dom": "18.2.0",
"next": "12.3.1",

还在我的另一个本地仓库中尝试了这个，react 17.0.2，没有 next.js，它通过了； 但它不会通过这个反应 18.2.0 和 next.js 回购...

Answer 1

和我的一个朋友核实过，他问我是否两个 repo 都将测试环境设置为浏览器，我检查了一下，是的，他们都将 testEnv 设置为 jsdom ...

检查了 jest.config 文件中的一些其他属性，结果发现错误回购中的 jest.config 文件中的 setupFilesAfterEnv 属性未正确配置，工作回购利用@testing-library/jest-dom/extend-expect ，而错误回购正在使用自定义的 js function...