具有上下文的React Testing库中的自定义渲染

问题描述

我正在尝试为测试创建自定义渲染，但是自从我使用screen.debug()检查后，结果一定是做错了

<body>
    <div />
</body>

我遵循了RTL文档中的示例。

这是displaySearchBar.test.js

import React from 'react';

import displaySearchBar from '../../../layout/displaySearchBar/displaySearchBar';
import { screen,render,cleanup,fireEvent } from '../../../../test/testUtils';

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

const props = {
  handleScriptLoad: jest.fn(),};

afterEach(cleanup);

describe('Search',() => {
  test('1- input "where" updates its value when input simulated',() => {
    const { getByPlaceholderText } = render(<displaySearchBar {...props} />);
    let input = getByPlaceholderText('Where do you want to eat?');

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

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

还有testUtil.js

import React from 'react';
import { render } from '@testing-library/react';
import restContext from '../Components/context/restaurant/restContext';

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

const Provider = ({ component }) => (
  <restContext.Provider value={value}>{component}</restContext.Provider>
);

const customrender = (ui,options) =>
  render(ui,{ wrapper: Provider,...options });

// re-export everything
export * from '@testing-library/react';

// override render method
export { customrender as render };

这是原始的displaySearchBar.js

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

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

jest.mock('../../Alert/Alert',};
let value = {
  restaurants: [],};

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

afterEach(cleanup);

describe('Search',() => {
    const { getByPlaceholderText } = render(wrapper);
    let input = getByPlaceholderText('Where do you want to eat?');

    fireEvent.change(input,});

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

如果有人可以向我解释我做错了什么，那将是很好的。谢谢您的帮助！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）