redux React测试库:我的模拟还原商店空了

sf6xfgos  于 2023-03-08  发布在  React
关注(0)|答案(1)|浏览(144)

我不明白为什么在呈现时我的模拟redux存储是空的。组件会呈现,但它对我需要测试的redux存储中的一个选定值有条件useEffect,但尽管我发送了它,但选定值总是空的。
下面是我的测试:

// Mock redux
jest.mock("react-redux", () => {
    return {
        ...jest.requireActual("react-redux"),
        useSelector: jest.fn(),
        };
});


describe('Display', () => {

    const mockState = {
        value: "",
        valueList: ["test-1", "test-2"]
    };

    const mockStore = configureStore();
    const store = mockStore(mockState);
    
    it('Renders deeply', ()  =>  {

        
        render(
            <Provider store={store}>
                <Display/>
            </Provider>
        )

        expect(screen.getByText("test-1")).toBeTruthy()
    })  
});

以下是组件:

function Display() {
  const value = useSelector((state) => state.data.value)
  const list = useSelector((state) => state.data.valueList) 
  const [rows, setRows] = useState([])

  useEffect(() => {
    const temp = []
      list.forEach((item) => {
        ......
      })
      setRows(temp)
  }, [list])

  return (
    <Container>
      { !value && 
        <Container >
          <p>Placeholder</p>
          { !rows.length ? ....  : 
            <div>.....</div>
          }
          </Container>
      }
    </Container>
  )
}

然而,尽管如此,当测试在组件中运行时valueList总是空的,有人知道这是为什么吗?

1tuwyuhd

1tuwyuhd1#

1.不要部分模拟useSelector,甚至是react-redux包,你的模拟实现会破坏第三方包的功能。
1.如果您使用redux-mock-store包来创建模拟存储,那么您没有提供正确的state
例如
index.jsx

import { useSelector } from 'react-redux';

export const Display = () => {
  const list = useSelector((state) => state.data.valueList);
  console.log("🚀 ~ file: index.jsx:5 ~ Display ~ list:", list)
  return null;
};

index.test.jsx

import { render } from '@testing-library/react';
import React from 'react';
import { Provider } from 'react-redux';
import configureStore from 'redux-mock-store';
import { Display } from '.';

describe('75622227', () => {
  test('should pass', () => {
    const mockState = {
      data: {
        value: '',
        valueList: ['test-1', 'test-2'],
      },
    };
    const mockStore = configureStore();
    const store = mockStore(mockState);

    render(
      <Provider store={store}>
        <Display />
      </Provider>
    );
  });
});

试验结果:

PASS  stackoverflow/75622227/index.test.jsx (10.247 s)
  75622227
    ✓ should pass (40 ms)

  console.log
    🚀 ~ file: index.jsx:5 ~ Display ~ list: [ 'test-1', 'test-2' ]

      at Display (stackoverflow/75622227/index.jsx:5:11)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        11.019 s

相关问题