- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在 fireEvent.focus()
之后拍摄快照时遇到问题被称为。
这是测试。我在这里有两个测试,第一个是比较输入聚焦之前的快照,另一个是比较输入聚焦之后的快照。
describe("Unit: <OutlinedInput />", (): void => {
describe("Initial render", (): void => {
describe("renders as snapshot", (): void => {
it("for standard fields", (): void => {
const { asFragment } = render(<OutlinedInput {...standardProps} />, {});
expect(asFragment()).toMatchSnapshot();
});
});
});
describe("On focus in, no input", (): void => {
describe("renders as snapshot", (): void => {
it("for standard fields", (): void => {
const { getByLabelText, container, asFragment } = render(
<OutlinedInput {...standardProps} />,
{}
);
const input = getByLabelText(standardProps.label);
fireEvent.focus(input);
waitForDomChange(container)
.then(
(): void => {
expect(asFragment()).toMatchSnapshot();
}
)
.catch((error: Error): void => console.log(error.message));
});
});
});
});
但是当我检查快照时,只创建了 1 个:
exports[`Unit: <OutlinedInput /> Initial render renders as snapshot for standard fields 1`] = `
<DocumentFragment>
<div
class="MuiFormControl-root MuiFormControl-marginDense MuiFormControl-fullWidth"
data-testid="outlinedInputFormControl"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-marginDense MuiInputLabel-outlined"
data-shrink="false"
data-testid="outlinedInputLabel"
for="name"
>
Name Label
</label>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl MuiInputBase-marginDense"
data-testid="outlinedInputInput"
>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-62 MuiOutlinedInput-notchedOutline makeStyles-notchedOutline-6"
style="padding-left: 8px;"
>
<legend
class="PrivateNotchedOutline-legend-63"
style="width: 0.01px;"
>
<span>
</span>
</legend>
</fieldset>
<input
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense"
id="name"
type="string"
value=""
/>
</div>
</div>
</DocumentFragment>
`;
似乎asFragment
是在组件的初始渲染期间创建的,并且不会被 fireEvent.focus(input)
更新.这导致两个快照完全相同,我猜 React-Testing-Library 仅因此创建了 1 个快照。
应该会创建 2 个快照。第二个测试(有 fireEvent.focus(input)
)应该为不同的组件提供不同的类。例如,<label>
元素应该有一个额外的类 Mui-Focused
,我可以看到当我在浏览器中运行我的应用程序时会发生什么。
我该如何解决这个问题?
最佳答案
我让它工作了。显然,您不应该在比较快照之前等待 DOM 更新。
这是所做的更改:
describe("On focus in, no input", (): void => {
describe("renders as snapshot", (): void => {
it("for standard fields", (): void => {
const { getByLabelText, asFragment } = render(
<OutlinedInput {...standardProps} />,
{}
);
const input = getByLabelText(standardProps.label);
fireEvent.focus(input);
expect(asFragment()).toMatchSnapshot();
});
});
});
关于jestjs - React-Testing-Library - 在 fireEvent 之后拍摄快照,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56021640/
有没有办法用 Jestjs 编写更多数据驱动的测试? 我想出了这样的东西: it('assignments and declarations', () => { testCases.f
我想知道如何为 package.json 中的所有 JestJS 测试设置全局超时? 默认的 5000 毫秒对于我的测试来说是不够的。我不想为我的每个测试执行以下代码: it('should retu
我们正在使用 Jest/Enzyme 进行我们的 React 集成测试。我们有一个组件在等待 iframe 加载时显示微调器。当此页面在真实世界的浏览器环境中加载时,微调器会明显显示。但是,在测试 中
Jest 不提供我的手动模拟。一切似乎都在正确的目录中。我错过了什么? src/adapters/__mocks__/Foo.js const spy = jest.genMockFromModule
我对 Jest 有点陌生,所以如果这是一个明显的答案,请原谅我,但在滚动浏览文档后我找不到答案。 我有一个函数 (funcA),它将一个不同长度的数组传递给另一个函数 (funcB),具体取决于 fu
我正在GitLab CI中进行代码覆盖率的玩笑测试,并且GitLab从gitlab中的运行程序的标准输出中捕获了百分比。 jest --coverage在stdout中产生覆盖率,而gitlab使用/
我正在使用Jest运行Selenium测试。我希望登录测试在其余的Webapp功能测试之前进行。我可以使用jest -i依次运行文件,但找不到控制文件运行顺序的方法。我尝试更改文件名,希望它按文件名的
这个和这个不一样enzyme-to-snapshot-render-object-as-json因为 这里我想生成对象的带有JSON定义的快照 另一个我想为组件生成的 only for HTML 生成
我编写了一个脚本,其主要目的是向某些表格的单元格添加新元素。 测试是通过类似这样的方式完成的: document.body.innerHTML = `
我看到有两个配置选项可以在每次测试之前运行一些代码:setupFiles和setupFilesAfterEnv。在我看来,setupFilesAfterEnv提供了更大的灵活性(我可以使用jest,b
我已经找到了一些特定于版本的questions on SO,用于 Jest 单元测试,并将其结果发布在VSTS构建测试结果标签中。但是找不到适当的解决方案。 最佳答案 经过一些研究,我发现Jest t
我想在Jest测试代码中摆脱全局变量。具体来说describe,it和expect: describe('Welcome (Snapshot)', () => { it('Welcome rend
我想测试一个非常简单的JS函数 export function displaySpinner() { const loadingOverlayDOM = document.createElem
该项目具有客户端应用程序和服务器站点代码,一旦项目在本地构建,它将把所有构建的前端和后端 Assets 放入 build目录,它包含客户端需要使用的所有静态 Assets (所有测试用例也包括在那里)
我了解Jest是用于JavaScript的开发人员的单元测试工具。 Jest是类似于Selenium的基于浏览器的测试工具还是功能测试工具? 最佳答案 该npm库可以与您的jest测试集成在一起,以在
我发现“笑话快照摘要”有点令人困惑。在我们的一个存储库中运行测试后,我得到以下摘要: Snapshot Summary › 2 snapshots written in 1 test suite.
我对 Jest 用于运行测试的顺序有一些疑问。 假设我有两个测试: module1.spec.ts module2.spec.ts 这些模块中的每一个都使用一个公共(public)数据库。在每个文件的
我想为我的代码库中的所有文件运行覆盖率报告,包括那些目前没有任何测试的文件。 我正在使用这个命令: jest --coverage --collectCoverageFrom='src/feature
我想在 jest 中断言数组包含具有某些属性的对象,例如: [ { id: 1, name: 'A' }, { id: 2, name: 'B' }, { id: 3 }
我正在开发一个文本生成器,我想将生成的字符串与存储在示例文件中的文本进行比较。文件某些行有缩进,在 TS/js 中构造这些字符串非常麻烦 是否有一种简单的方法可以从相对于当前测试甚至 Jest 项目根
我是一名优秀的程序员,十分优秀!