我有一个<UserListComponent />输出一个<Contact />组件和提供的联系人列表<Contacts />.
问题是,在<UserListComponent />我尝试安装它的测试中,测试输出错误Invariant Violation: You should not use <Route> or withRouter() outside a <Router>
withRouter()用于<Contacts />组件.
如何ContactsComponent在没有路由器的情况下模拟父组件的测试？
我发现了一些类似的问题https://www.bountysource.com/issues/49297944-invariant-violation-you-should-not-use-route-or-withrouter-outside-a-router
但它只描述了组件的情况单独覆盖withRouter(),而不是儿童.
UserList.test.jsx
const mockResp = {
count: 2,
items: [
{
_id: 1,
name: 'User1',
email: 'email1@gmail.com',
phone: '+123456',
online: false
},
{
_id: 2,
name: 'User2',
email: 'email2@gmail.com',
phone: '+789123',
online: false
},
{
_id: 3,
name: 'User3',
email: 'email3@gmail.com',
phone: …我无法在jest中模拟静态方法.想象一下,你有一个静态方法的A类:
export default class A {
f() {
return 'a.f()'
}
static staticF () {
return 'A.staticF()'
}
}
还有一个进口A的B级
import A from './a'
export default class B {
g() {
const a = new A()
return a.f()
}
gCallsStaticF() {
return A.staticF()
}
}
现在你要模拟A.很容易模拟f():
import A from '../src/a'
import B from '../src/b'
jest.mock('../src/a', () => {
return jest.fn().mockImplementation(() => {
return { f: () => { return 'mockedA.f()'} }
})
})
describe('Wallet', () => {
it('should work', () …当我对应用程序中的各个组件运行一些单元测试时，我不断收到这个恼人的警告：
NativeModules.RNViewShot is undefined. Make sure the library is linked on the native side.
在我的根目录中，我运行'react-native link'并在控制台中看到：
rnpm-install info Platform 'ios' module react-native-view-shot is already linked
rnpm-install info Platform 'android' module react-native-view-shot is already linked
rnpm-install info Linking assets to ios project
rnpm-install info Linking assets to android project
rnpm-install info Assets have been successfully linked to your project
这里给出了什么 > ？
Platform: MacOS,
Editor: VSCode,
react: "16.4.0",
react-native: "0.54.2",
react-native-view-shot: "^2.4.0",
我目前正在使用Jest＆react-testing-library测试输入。我试图测试每当输入字段更改时onChange函数是否会触发。这是我的代码示例：
const placeHolder = 'first name';
const onChange = jest.fn();
test('<InputText/>', () => {
const {getByPlaceholderText} = render(
<InputText placeholder={placeHolder} onChange={onChange} />
);
const input = getByPlaceholderText(placeHolder);
fireEvent.change(input, {
target: {value: 'pls work'},
});
expect(onChange).toHaveBeenCalledTimes(1);
});
这是运行此测试时在终端上获得的东西：
expect(jest.fn()).toHaveBeenCalledTimes(1)
Expected mock function to have been called one time, but it was called zero times.
我在其他测试中使用了fireEvent.click（）函数，但没有任何问题，但是fireEvent.change（）似乎对我不起作用。
我有一个搜索栏组件，看起来像：
render () {
const { onChangeTextInput } = this.props
return (
<Form
name="searchForm"
ref={(ref) => {
this.searchForm = ref
}}
>
<TextInput
noSpacing
placeholder={t('search')}
name="search"
validate="text"
icon={this.icon}
onChangeTextCallback={() => {
onChangeTextInput(this.searchForm.values)
}}
/>
)
</Form>
)
}
}
我正在使用浅渲染和玩笑来运行单元测试以测试以下情况”
我正在运行的测试表示为：
test('SearchBar returns value on text change', () => {
const onChangeFunction = jest.fn()
const obj = shallow(
<SearchBar onChangeTextInput={onChangeFunction} />
)
obj.find('TextInput').props().onChangeTextCallback('h')
expect(onChangeFunction).toHaveBeenCalledWith('h')
})
我收到一个奇怪的错误说明：
TypeError: Cannot read property 'values' of undefined
51 | icon={this.icon}
52 | …使用反应 16.3.1，开玩笑 16.3.1，酶 3.3.0。
在我的 React Class 组件中，我创建了一个 react ref，我用它来确保安装组件时浏览器位于页面顶部。
class PageView extends React.Component {
constructor(props) {
super(props);
this.topOfPageRef = React.createRef();
}
componentDidMount() {
ReactDOM.findDOMNode(this.topOfPageRef.current).scrollIntoView();
}
render(){
const { x } = this.props;
return (
<React.Fragment>
<div className="main-wrapper" ref={this.topOfPageRef}>
Top
</div>
)}
</React.Fragment>
);
}
}
这一切都在浏览器中完美运行，但在我的酶测试中失败了。
我的测试很简单，它只是尝试渲染组件。
it('should render component correctly', () => {
const props = {
...defaultProps,
};
const wrapper = mount(<PageView {...props} />);
expect(wrapper).toMatchSnapshot();
});
TypeError: Cannot read property 'scrollIntoView' of null
我已经尝试了浅层和挂载 …