Question

我有一个工作正常的受控组件，您可以在其中输入内容并从更改处理程序中调度操作，还可以将更改分发到商店中，并且该组件将更新。

我正在尝试测试此受控组件，并使用fireEvent.change(input, { target: { value: '5' } });正确分派了输入更改应发生的事件，但它不会更改测试组件的文本。

该问题已基本解决here，并且我更新了测试使其可以正常工作：

describe('Motion Threshold', () => {
  const middlewares = [thunk];
  const mockStore = configureMockStore(middlewares);
  let store;
  let component;

  function provided(passedState) {
    store = mockStore(passedState);
    return <Provider store={store}>
      <MotionContainer/>
    </Provider>;
  }

  beforeEach(() => {
    const state = { settings: defaultSettingsState };
    component = render(provided(state));
  });

  describe('typing ("local input")', () => {
    let input;
    beforeEach(() => {
      input = component.getByTestId('MOTION_INPUT');
      fireEvent.change(input, { target: { value: '5' } });
    });

    // PASS
    it('dispatches a change parameter event to the store when the input is changed', () => {
      const expectedAction = changeParameter(ParameterName.motion, 5);
      expect(store.getActions()).toEqual(expect.arrayContaining([expectedAction]));
    });

    // PASS
    it('changes the text', () => {
      component.rerender(provided({ settings: { ...defaultSettingsState, motion: 5 } }));
      expect(input.value).toEqual('5');
    });

    // FAIL
    it('results in a change to the state', () => {
      expect(store.getState().settings.motion).toEqual(5);
    });
  });

如果您正在测试（1）调度了动作，并且（2）输入响应状态更改，那么我猜这很好。但是，如果您想集成这些测试，在其中触发输入事件，然后测试它是否在没有显式更改组件的情况下更改了文本，那么这将无济于事。

没有办法进行此实际的完全集成测试吗？ react-testing-library是否无法自行重新渲染？

（为什么我的第三项考试失败了，特别是如果我的第一项考试通过了？）

PS。我知道我没有包含这些组件，但是考虑到我的问题，我的描述和测试代码可以说明一切。如果有人想看的话，我可以把它包括在内。

使用反应测试库测试受控和连接的组件

0 个答案: