React Native + Enzyme + Jest:模拟的 redux 函数调用未注册/调用零次

Question

我正在使用React Native和Redux编写一个应用程序。我正在设计一个登录表单，并想测试组件句柄提交功能。在handleSubmit()函数中，应将多个操作分派给 Redux。让我给你handleSubmit()函数代码和它的测试。首先是函数本身：

handleSubmit = (values, formikBag) => {
formikBag.setSubmitting(true);
const { loginSuccess, navigation, setHouses, setCitizens } = this.props;
apiLoginUser(values.email, values.password)
.then(data => {
const camelizedJson = camelizeKeys(data.user);
const normalizedData = Object.assign({}, normalize(camelizedJson, userSchema));
loginSuccess(normalizedData);
const tokenPromise = setToken(data.key);
const housePromise = getHouseList();
Promise.all([tokenPromise, housePromise])
.then(values => {
setHouses(values[1]);
getCitizenList(values[1].result[0])
.then(citizens => {
setCitizens(citizens);
formikBag.setSubmitting(false);
navigation.navigate("HomeScreen");
})
.catch(err => {
formikBag.setSubmitting(false);
alert(err);
});
})
.catch(err => {
console.log(err);
formikBag.setSubmitting(false);
alert(err);
});
})
.catch(error => {
alert(error);
formikBag.setSubmitting(false);
});
};

如您所见，我还使用 normalizr 来解析数据。getHouseList()和getCitizenList()函数的数据在各自的函数中规范化。

以下是测试：

const createTestProps = props => ({
navigation: { navigate: jest.fn() },
loginSuccess: jest.fn(),
setHouses: jest.fn(),
setCitizens: jest.fn(),
...props
});
...
describe("component methods", () => {
let wrapper;
let props;
beforeEach(() => {
props = createTestProps();
wrapper = shallow(<LoginForm {...props} />);
fetch.mockResponseOnce(JSON.stringify(userResponse));
fetch.mockResponseOnce(JSON.stringify(housesResponse));
fetch.mockResponseOnce(JSON.stringify(citizensResponse));
wrapper
.instance()
.handleSubmit({ email: "abc", password: "def" }, { setSubmitting: jest.fn() });
});
afterEach(() => {
jest.clearAllMocks();
});
it("should dispatch a loginSuccess() action", () => {
expect(props.loginSuccess).toHaveBeenCalledTimes(1);
});
});

在这个测试中，提供给jest-fetch-mocks的值(userResponse、housesResponse和citizensResponse(是常量。我现在这个测试失败了，因为显然应该调度 Redux 操作的loginSuccess()从未被调用(即使我在createProps()函数中提供了jest.fn()(。

我做错了什么？为什么从不调用loginSuccess()函数？

编辑：根据布莱恩的要求，这是api调用的代码：

export const apiLoginUser = (email, password) =>
postRequestWithoutHeader(ROUTE_LOGIN, { email: email, password: password });
export const postRequestWithoutHeader = (fullUrlRoute, body) =>
fetch(fullUrlRoute, {
method: "POST",
body: JSON.stringify(body),
headers: { "Content-Type": "application/json" }
}).then(response =>
response.json().then(json => {
if (!response.ok) {
return Promise.reject(json);
}
return json;
})
);

Answer 1

问题

对props.loginSuccess()的断言发生在调用它的代码运行之前。

详

重要的是要记住，JavaScript 是单线程的，并且在消息队列之外工作(请参阅并发模型和事件循环(。

它从队列中获取一条消息，运行关联的函数，直到堆栈为空，然后返回到队列以获取下一条消息。

JavaScript 中的异步代码通过将消息添加到队列来工作。

在这种情况下，对then()apiLoginUser()的调用正在将消息添加到队列中，但在beforeEach()结束到it('should dispatch a loginSucces() action')之间，并非所有消息都有机会执行。

溶液

解决方案是确保最终调用loginSuccess()的排队消息都有机会在执行断言之前运行。

有两种可能的方法：

方法1

handleSubmit()返回apiLoginUser()创建的承诺，然后在beforeEach()结束时返回该承诺。 从beforeEach()返回Promise将导致Jest在运行测试之前等待它解析。

方法2

等待Promise是理想的，但如果代码无法更改，则可以手动延迟测试中的断言所需的事件循环周期数。 最干净的方法是使测试异步并等待已解决的Promise(如果需要多个事件循环周期，则等待一系列承诺(：

it('should dispatch a loginSuccess() action', async () => {
// queue the rest of the test so any pending messages in the queue can run first
await Promise.resolve();
expect(props.loginSuccess).toHaveBeenCalledTimes(1);
});