Question

我正在尝试使用 jest 和 react 测试库编写一个测试，以查看商店是否更新了状态以及新状态是否显示在组件内。

我有一个类似的组件：

import { getName } from 'src/store/actions/hello/getName';

const HelloComponent = () => {
    const dispatch = useDispatch();
    const { name, isLoading } = useSelector((state:RootState) => state.Hello)
    useEffect( () => {
       dispatch(getName());
    }, []);
    return (
        <div>
             { name &&
               Hello {name}
             }
        </div>
    )
}

有调用 API 的商店，例如：

const getName = () => (dispatch) => {
  const URL = getUrl()
  fetch(URL, {method: 'GET'})
    .then((response) => response.json())
    .then(({ data }) => dispatch({
      type: 'SAVE_NAME',
      payload: data.name
    })) # This action updates the name inside the redux state
};

我正在使用 mswjs 来模拟 API 调用，我想测试一下，在组件挂载后，DOM 显示“Hello John”。

这是我写的测试，但它不起作用：

it('shows the name', async () => {
   const {findByText} = renderWithStore(<HelloComponent />);
   expect(await findByText('Hello John')).toBeInTheDocument();
});

renderWithStore 模拟商店。

import configureStore from 'redux-mock-store';
import { render as rtlRender } from '@testing-library/react'
import { initialState as Hello } from '../src/store/reducers/helloReducer';


const mockStore = configureStore()

const initialStateMock = {
   Hello
}
function render(
  ui
) {
  const store = mockStore(initialStateMock);
  function Wrapper({ children }) {
    return <Provider store={store}>{children}</Provider>
  }
  return rtlRender(ui, { wrapper: Wrapper })
}

好像不等待状态更新。

非常感谢任何帮助

谢谢

Answer 1

我想我已经发现问题了。

redux-mock-store 库不允许测试状态变化。内部组件正在更改“真实”存储状态，而不是模拟存储状态，但它在渲染时使用模拟存储状态，但不会更改。

在这个测试中，我不需要传递与原始存储不同的初始存储，我可以使用“真实”存储而无需模拟它：

 import {render} from '@testing-library/react'
 import store from 'path_to_the_app_store_obj';
 
 it('shows the name', async () => {
   const {findByText} = render(
        <Provider store={store}>
            <HelloComponent />
        </Provider>
    );
   expect(await findByText('Hello John')).toBeInTheDocument();
 });

使用原始存储进行测试。

此外，有时您可能希望等待 store 更改，在这些情况下，我发现添加以下内容很有用：

 await act(() => sleep(500));

在触发 store 操作之后和“expect”之前。

如何使用 react 测试库和 jest 测试 redux 状态更新

1 个答案: