如何在笑话/酶中模拟“通用cookie”？

Question

我有一个使用“universal-cookie”的 React 组件。在测试用例中调用 mount 时，cookies 对象为空。

import Cookies from 'universal-cookie';
const cookies = new Cookies();
class MyComponent extends React.Component {
   componentDidMount(){
     axios.defaults.headers.common.Authorization = cookies.get('token').value; //12492525
   }
}

//My Test File
describe('MyComponent Test', () => {
  it('Component mounted', () => {
     const wrapper = mount(<MyComponent/>);
  });
});

当我运行测试文件时，我不断收到错误

Cookie 附近的“类型错误：无法读取未定义的属性‘值’”。

无论我尝试模拟或设置多少次，Cookie 值都是空的。

到目前为止我尝试设置

cookies.set('HAS_DOCUMENT_COOKIE', true);
cookies.set('token', { value: '1244'});// in my test file

Answer 1

您可以使用jest.mock(moduleName,factory,options)模拟universal-cookie和axios模块

\n\n

例如\n index.tsx：

\n\n

import React from "react";\nimport Cookies from "universal-cookie";\nimport axios from "axios";\n\nconst cookies = new Cookies();\n\nexport class MyComponent extends React.Component {\n  componentDidMount() {\n    axios.defaults.headers.common.Authorization = cookies.get("token").value; //12492525\n    console.log(axios.defaults.headers.common.Authorization);\n  }\n  render() {\n    return null;\n  }\n}\n

\n\n

index.spec.tsx:

\n\n

import React from "react";\nimport { shallow } from "enzyme";\nimport Cookies from "universal-cookie";\nimport axios from "axios";\nimport { MyComponent } from "./";\n\njest.mock("axios", () => {\n  return {\n    defaults: {\n      headers: {\n        common: {\n          Authorization: ""\n        }\n      }\n    }\n  };\n});\n\njest.mock("universal-cookie", () => {\n  const mCookie = {\n    get: jest.fn()\n  };\n  return jest.fn(() => mCookie);\n});\n\ndescribe("MyComponent", () => {\n  afterEach(() => {\n    jest.resetAllMocks();\n  });\n  it("should set token correctly", () => {\n    const cookies = new Cookies();\n    (cookies.get as jest.Mocked<any>).mockReturnValueOnce({\n      value: "12492525"\n    });\n    const logSpy = jest.spyOn(console, "log");\n    const wrapper = shallow(<MyComponent></MyComponent>);\n    expect(axios.defaults.headers.common.Authorization).toBe("12492525");\n    expect(logSpy).toBeCalledWith("12492525");\n  });\n});\n

\n\n

100%覆盖率的单元测试结果：

\n\n

PASS  src/stackoverflow/59146770/index.spec.tsx (9.453s)\n  MyComponent\n    \xe2\x9c\x93 should set token correctly (21ms)\n\n  console.log node_modules/jest-mock/build/index.js:860\n    12492525\n\n-----------|----------|----------|----------|----------|-------------------|\nFile       |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |\n-----------|----------|----------|----------|----------|-------------------|\nAll files  |      100 |      100 |      100 |      100 |                   |\n index.tsx |      100 |      100 |      100 |      100 |                   |\n-----------|----------|----------|----------|----------|-------------------|\nTest Suites: 1 passed, 1 total\nTests:       1 passed, 1 total\nSnapshots:   0 total\nTime:        10.887s\n

\n\n

源代码：https ://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/59146770

\n