testing-library/react 为 redux 工具包组件呈现空 <div />

Question

testing-library/react 为 redux 工具包组件渲染为空

import React from 'react';
import configureMockStore from 'redux-mock-store';
import * as actions from 'store/reducer/reducer';
import { fireEvent, render, screen } from 'testUtils';
import MyComponent from 'components/MyComponent';
import { initialState } from 'store/reducer/reducer';

const mockStore = configureMockStore();
describe('my component', () => {
  let message;
  beforeAll(() => {
    message = 'testing';
  });
  it('test 1', () => {
    const store = mockStore({
      myState: {
        ...initialState,
        message,
      },
    });
    render(<MyComponent />, {
      store: store,
    });
    screen.debug();
    expect(screen.queryAllByText(message).length).toBe(1);
  });
});

// 在 testUtils

    function render(ui, { store = configureStore(), ...renderOptions } = {}) {
      function Wrapper({ children }) {
        return (
          // ..some other Providers
          <Provider store={store}>
            {children}
          </Provider>
        );
      }
export {render};

现在 screen.debug() 只显示

<body>
    <div />
</body>

// 在我的组件中

const MyComponent = (): JSX.Element => {
  const dispatch = useDispatch();
  const myState = useSelector(myReducer);

  return (
    <AnotherComponent
      isOpen={myState?.isOpen}
      message={myState?.message}
    />
  );
};

它产生的问题是它不会成功地将 MyComponent 渲染到 Mock DOM。 console.log 商店在商店中也显示正确的状态。但它只是渲染 body 标签中的空白。

我找到了它现在不起作用的原因。这是因为，在myComponent中，我在条件语句中有错别字。

Answer 1

我找到了它不起作用的原因。这是因为，在 myComponent 中，我在条件语句中有错字。谢谢大家。

testing-library/react 为 redux 工具包组件呈现空 <div />

testing-library/react rendering empty <div /> for a redux toolkit component

reactjs

react-testing-library

redux-toolkit