javascript - 使用 React 测试库进行测试时输入不会更新

Question

我刚刚开始使用 React 测试库，我的第一次测试遇到了一些问题。

目的是测试输入值是否根据值更改事件更新，但我收到此错误：

    expect(received).toBe(expected) // Object.is equality

    Expected: "foo"
    Received: ""

我不明白我做错了什么，我按照文档并根据screen.debug()输入值是正确的：

// more code
              <input
                id="autocomplete"
                name="where"
                placeholder="Where do you want to eat?"
                type="text"
                value="foo"
              />
// more code

这是完整的测试文件：

import React from 'react';
import { render, fireEvent, cleanup, screen } from '@testing-library/react';

import { restContext } from './../../../context/restaurant/restContext';
import DisplaySearchBar from '../../../layout/DisplaySearchBar/DisplaySearchBar';

jest.mock('../../Alert/Alert', () => ({
  default: () => null,
  __esModule: true,
}));

const props = {
  handleScriptLoad: jest.fn(),
};
let value = {
  restaurants: [],
  getRestaurants: jest.fn(),
  setAlert: jest.fn(),
};

let wrapper = (
  <restContext.Provider value={value}>
    <DisplaySearchBar {...props} />
  </restContext.Provider>
);

afterEach(cleanup);

describe('Search', () => {
  test('1- input "where" updates its value when input simulated', () => {
    render(wrapper);
    let input = screen.getByPlaceholderText('What do you want to eat?');

    fireEvent.change(input, {
      target: { value: 'foo', name: 'where' },
    });

    screen.debug();

    expect(input.value).toBe('foo');
  });
});

谢谢你的帮助！

标签： javascriptreactjsunit-testingjestjsreact-testing-library