Reactjs 使用未定义的选择器

Reactjs 使用未定义的选择器,reactjs,react-testing-library,Reactjs,React Testing Library,嗨,我正在为一个包含redux的组件编写单元测试。测试时,抛出一个错误UseSelector state undefined。从api获得响应后,UseSelector将更新一次。直到它的价值没有定义。但当单元tetsing时,它会在第一个单元本身上抛出错误。如何克服这个问题 测试文件 import React from 'react'; import { render, fireEvent } from '@testing-library/react'; import { act } from

嗨,我正在为一个包含redux的组件编写单元测试。测试时,抛出一个错误UseSelector state undefined。从api获得响应后,UseSelector将更新一次。直到它的价值没有定义。但当单元tetsing时,它会在第一个单元本身上抛出错误。如何克服这个问题

测试文件

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { act } from 'react-dom/test-utils';
import '@testing-library/jest-dom/extend-expect';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import LinkApplication from '../index';
import {reducer} from '../../../redux/summary/reducer';
let INITIAL_STATES = {
    isFetching: false,
    errorMessage: "",
    requestExtensionErrorMessage: "",
    requestExtensionSuccessMessage: "",
    linkApplicationSuccess: "",
    linkApplicationFailure: null,
    linkLoanSuccessMessage: "",
    linkLoanErrorMessage: "",
    LinkApplicationErrorMessage:"",
  };
function renderWithRedux(
  component,
  { INITIAL_STATES, store = createStore(reducer, INITIAL_STATES) } = {},
) {
  return {
    ...render(<Provider store={store}>{component}</Provider>),
  };
}
it('sumbits the form', async () => {
  const onSubmit = jest.fn();
  const { getByText, getByTestId } = renderWithRedux(
    <LinkApplication onSubmit={onSubmit} />,
  );
  const Dob_Input = getByTestId('dob-input');
  const Phone_Input = getByTestId('phone-input');
  const form = getByTestId('form');
  act(() => {
    fireEvent.keyPress(Dob_Input, {
      target: { value: '1995-09-27' },
    });
    fireEvent.keyPress(Phone_Input, { target: { value: '9500902621' } });
  });
  expect(Dob_Input.value).toBe('1995-09-27');
  expect(Phone_Input.value).toBe('9500902621');
  await act(() => {
    fireEvent.submit(form);
  });
  expect(onSubmit).not.toHaveBeenCalled();
})
错误


请帮帮我。

我想你需要模仿
反应redux

import * as React from 'react';
import { shallow } from 'enzyme';
jest.mock('react-redux', () => ({
  useDispatch: () => {},
  useSelector: () => ({
    your: 'state',
  }),
}));
import Component from './index';
describe('Test component', () => {
  it('Should render and match the snapshot', () => {
    const wrapper = shallow(<Component />);
  });
});
import*as React from'React';
从“酶”导入{shall};
mock('react-redux',()=>({
useDispatch:()=>{},
useSelector:()=>({
你的"州",,
}),
}));
从“./index”导入组件;
描述('测试组件',()=>{
它('应该呈现并匹配快照',()=>{
常量包装器=浅();
});
});

这是否回答了您的问题?任何使用react测试库的示例
TypeError: Cannot read property 'linkApplicationFailure' of undefined
const dispatch = useDispatch();
let LinkApplicationErrorMessage = useSelector(
state => state.summary.linkApplicationFailure
^
);

import * as React from 'react';
import { shallow } from 'enzyme';
jest.mock('react-redux', () => ({
  useDispatch: () => {},
  useSelector: () => ({
    your: 'state',
  }),
}));
import Component from './index';
describe('Test component', () => {
  it('Should render and match the snapshot', () => {
    const wrapper = shallow(<Component />);
  });
});