mee*_*kat 6 mocking reactjs jestjs react-testing-library
我遇到的问题是，模拟的常量在之后的组件中不会改变jest.doMock。
看一下最小的仓库。
我尝试过用-mock代替doMock- 同样的错误。
应用程序.test.js
import React from "react"
import App from './App'
import '@testing-library/jest-dom'
import { render } from "@testing-library/react";
describe('testing app.js', () => {
// To reset manually mocked values
beforeEach(() => {
jest.resetModules()
});
test("SET CONSTANT TO 1", () => {
jest.doMock('./myConstants.js', () => ({
CONSTANT: {
NUMBER: 1
}
}))
const { getByText, getByLabelText } = render(<App />)
expect(getByText('1')).toBeInTheDocument()
})
test("SET CONSTANT TO 3", () => {
jest.doMock('./myConstants.js', () => ({
CONSTANT: {
NUMBER: 3
}
}))
const { getByText, getByLabelText } = render(<App />)
expect(getByText('3')).toBeInTheDocument()
})
})
应用程序.js
import React from "react"
import { CONSTANT } from './myConstants.js'
console.log(CONSTANT)
const App = () => {
return (
<div>
{CONSTANT.NUMBER}
</div>
);
}
export default App;
myConstants.js：
export const CONSTANT = { NUMBER: 2 }
上述两个测试均失败。其中之一的输出是：
TestingLibraryElementError: Unable to find an element with the text: 3. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
<body>
<div>
<div>
2
</div>
</div>
</body>
29 | }))
30 | const { getByText, getByLabelText } = render(<App />)
> 31 | expect(getByText('3')).toBeInTheDocument()
尽管提供的解决方案工作得很好，但我不想重写我要测试的每个组件（通过添加require(...)）。解决方法是使用import("./App").then((module)
import React from "react"
import App from './App'
import '@testing-library/jest-dom'
import { render } from "@testing-library/react";
describe('testing app.js', () => {
// To reset manually mocked values
beforeEach(() => {
jest.resetModules()
});
jest.doMock('./myConstants.js', () => {
return {
__esModule: true,
CONSTANT: {
NUMBER: 1
}
}
})
test("SET CONSTANT TO 1", () => {
// Wait for mock done
return import('./myConstants.js').then((constants) => {
console.log(constants.CONSTANT.NUMBER)
expect(constants.CONSTANT.NUMBER).toBe(1)
import("./App").then((module) => {
const { getByText, getByLabelText } = render(<module.default />)
expect(getByText('1')).toBeInTheDocument()
})
})
})
})
使用jest.doMock比你想象的要复杂。基本上它需要您按照https://jestjs.io/docs/en/jest-object#jestdomockmodulename-factory-options的描述执行几个步骤。
这意味着您必须更改测试才能满足上述要求：
test("SET CONSTANT TO 1", () => {
jest.doMock('./myConstants.js', () => {
return {
__esModule: true,
CONSTANT: {
NUMBER: 1
}
}
})
// Wait for mock done
return import('./myConstants.js').then(() => {
const { getByText, getByLabelText } = render(<App />)
expect(getByText('1')).toBeInTheDocument()
})
})
// While you also require your code right before using instead of `require` at the top level:
const App = () => {
// Require to use it right before using it
const { CONSTANT } = require('./myConstants.js');
return (
<div>
{CONSTANT.NUMBER}
</div>
);
}
| 归档时间： |
|
| 查看次数： |
11051 次 |
| 最近记录： |