вход на изменение не обновляет состояние в шутку и фермент

Question

import { BrowserRouter as Router } from "react-router-dom";

const setup = (props = {}, state = null,initialState={}) => {
  const store = storeFactory(initialState);
  const wrapper = mount(
  <Router
     <Component {...props} store={store}/>
  </Router>
  );
  if (state) wrapper.setState(state);
  return wrapper;
};

test("Rendered email input and test valid", () => {
  const email = "";
  const wrapper = setup(null, { email });
  const emailInput = findByTestAttribute(
    wrapper,
    someId
  );
  emailInput.simulate("change", { target: { value: "email@email.com" } });
  console.log(wrapper.state('email')) //Empty ""
  expect(wrapper.state("email")).toBe("email@email.com");
});

wrapper.state ('email') должен был вернуть email@email.com, но он не обновляется. Есть причины?

Answer 1

Вам необходимо передать id в смоделированном событии:

emailInput.simulate("change", {
        target: {
          id: "your id here"
          value: "email@email.com"
        }
      });

Кроме того, поскольку обновления выполняются асинхронно, вы должны дождаться ваших обещаний, прежде чем выполнять какие-либо утверждения.

Определить flushPromises функция:

function flushPromises() {
  return new Promise(resolve => setImmediate(resolve));
}

Тогда ждите обещания в вашем тесте:

test("Rendered email input and test valid", () => {
  const email = "";
  const wrapper = setup(null, { email });
  const emailInput = findByTestAttribute(
    wrapper,
    someId
  );
  emailInput.simulate("change", { target: { id: "your id here", value: "email@email.com" } });
  await flushPromises; // await for promises to return
  console.log(wrapper.state('email')) //Empty ""
  expect(wrapper.state("email")).toBe("email@email.com");
});