运行 使用 react-testing-library 的玩笑测试错误
Error in running jest test with react-testing-library
第一次写测试。我正在为用钩子编写的 ReactJS 应用程序编写测试,并使用 Jest and react-testing-library.
进行测试
这是我的功能组件:
const ItemDetails = ({ item }) => {
const { code } = item;
const { getBarcode } = useStationContext();
return (
<>
<Button
type="primary"
onClick={() => {
getBarcode(code);
}}
style={{ float: 'right' }}
>
Print Barcode
</Button>
<List
bordered
dataSource={formatData(item)}
renderItem={({ title, value }) => (
<List.Item>
<List.Item.Meta
description={
<Wrapper>
<p>{upperCase(title)}</p>
<div>{value}</div>
</Wrapper>
}
/>
</List.Item>
)}
/>
</>
);
};
export default ItemDetails;
和测试文件:
import React from 'react';
import { render, cleanup } from 'react-testing-library';
import ItemDetails from '../containers/Items/ItemPage/ItemDetails';
afterEach(cleanup);
describe('formatData()', () => {
it('Return Details about item', async () => {
const { getByText, getByTestId, container, asFragment } = render(
<ItemDetails
item={{
id: '296-c-4f-89-18',
barcode: 'E-6',
}}
/>,
);
global.console = {
log: jest.fn(getByText, getByTestId, container, asFragment),
};
expect(global.console.log).toHaveBeenCalledWith('test');
});
});
当我 运行 测试时我得到了这个错误:
TypeError: Cannot read property 'getBarcode' of null
我不知道该如何解决?
预期是错误的,因为 console.log
没有在任何地方被调用。像 global.console = ...
这样模拟 console
对象是一种不好的做法,因为它在测试之间持续存在并且会破坏依赖它的东西,包括测试运行器本身。
与项目 code
键不一致,它被提供为 barcode
。
上下文值应为 undefined
,除非提供了默认值。应该在测试中提供。
可能应该是:
const getBarcodeMock = jest.fn();
const { getByText, getByTestId, container, asFragment } = render(
<StationContext.Provider value={{ getBarcode: getBarcodeMock }}>
<ItemDetails
item={{
id: '296-c-4f-89-18',
code: 'E-6',
}}
/>
</StationContext.Provider>
);
// ...simulate button click...
expect(getBarcodeMock).toBeCalledWith('E-6');
第一次写测试。我正在为用钩子编写的 ReactJS 应用程序编写测试,并使用 Jest and react-testing-library.
进行测试这是我的功能组件:
const ItemDetails = ({ item }) => {
const { code } = item;
const { getBarcode } = useStationContext();
return (
<>
<Button
type="primary"
onClick={() => {
getBarcode(code);
}}
style={{ float: 'right' }}
>
Print Barcode
</Button>
<List
bordered
dataSource={formatData(item)}
renderItem={({ title, value }) => (
<List.Item>
<List.Item.Meta
description={
<Wrapper>
<p>{upperCase(title)}</p>
<div>{value}</div>
</Wrapper>
}
/>
</List.Item>
)}
/>
</>
);
};
export default ItemDetails;
和测试文件:
import React from 'react';
import { render, cleanup } from 'react-testing-library';
import ItemDetails from '../containers/Items/ItemPage/ItemDetails';
afterEach(cleanup);
describe('formatData()', () => {
it('Return Details about item', async () => {
const { getByText, getByTestId, container, asFragment } = render(
<ItemDetails
item={{
id: '296-c-4f-89-18',
barcode: 'E-6',
}}
/>,
);
global.console = {
log: jest.fn(getByText, getByTestId, container, asFragment),
};
expect(global.console.log).toHaveBeenCalledWith('test');
});
});
当我 运行 测试时我得到了这个错误:
TypeError: Cannot read property 'getBarcode' of null
我不知道该如何解决?
预期是错误的,因为 console.log
没有在任何地方被调用。像 global.console = ...
这样模拟 console
对象是一种不好的做法,因为它在测试之间持续存在并且会破坏依赖它的东西,包括测试运行器本身。
与项目 code
键不一致,它被提供为 barcode
。
上下文值应为 undefined
,除非提供了默认值。应该在测试中提供。
可能应该是:
const getBarcodeMock = jest.fn();
const { getByText, getByTestId, container, asFragment } = render(
<StationContext.Provider value={{ getBarcode: getBarcodeMock }}>
<ItemDetails
item={{
id: '296-c-4f-89-18',
code: 'E-6',
}}
/>
</StationContext.Provider>
);
// ...simulate button click...
expect(getBarcodeMock).toBeCalledWith('E-6');