如何使用 jest 和酶导入带有模拟数据的手动模拟模块？

Chase 发表于 Dev

追赶

我的测试似乎没有在__mocks__/Auth.js.

我Auth.js在我的 React 应用程序中使用了一个模块App.js。我正在尝试使用手动模拟来模拟该模块，方法是在__mocks__/Auth.js. My__mocks__与App.js和处于同一文件级别Auth.js。

我在这里有一个仓库：https : //github.com/chaselw/reactTesting

或者我的测试如下：

import React from 'react';
import Enzyme, { shallow, mount } from 'enzyme';
import EnzymeAdapter from 'enzyme-adapter-react-16'
import App from './App';

Enzyme.configure({ adapter: new EnzymeAdapter() });

test('logged in false', () => {
    jest.mock('./Auth.js'); //Trying to get `auth.isLoggedIn() === false`
    const wrapper = mount(<App />);
    console.log(wrapper.debug())
    expect(wrapper.exists("[data-test='Logged-In-False']")).toBe(true);
})

预期结果是，在 if 检查之后，测试将从 Login 模块返回一个“Logged-In-False”div auth.isLoggedIn()。但是我得到了“真正的”div。在测试中， if I do: console.log(wrapper.auth.isLoggedIn())，它返回.isLoggedIn()未定义。

我是 React、笑话和酶的新手。我不知道出了什么问题，任何帮助都会很棒！谢谢。

追赶

解决办法很简单。jest.mock('./Auth.js')需要不在测试内部，而是在导入的顶层。

import React from 'react';
import Enzyme, { shallow, mount } from 'enzyme';
import EnzymeAdapter from 'enzyme-adapter-react-16'
import App from './App';
jest.mock('./Auth');

Enzyme.configure({ adapter: new EnzymeAdapter() });

test('logged in false', () => {
    //Trying to get `auth.isLoggedIn() === false`
    const wrapper = mount(<App />);
    console.log(wrapper.debug())
    expect(wrapper.exists("[data-test='Logged-In-False']")).toBe(true);
})

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。