我想写一个简单的测试 1-单击选项卡 2-看到状态复活了 3-标签的实际内容已更改
我的问题是触发了模拟点击,但setState不起作用
test('selected tab change when click on tab', () => {
const wrapper = shallow(<MyComponent />)
const walletTab1 = findByTestAttr(wrapper, 'wallet-tab-1').dive().dive().dive().dive()
console.log('shaloww',walletTab1.debug())
walletTab1.simulate('click')
const walletTabContainer = findByTestAttr(wrapper, 'wallet-tab-container-1')
expect(walletTabContainer.length).toBe(1)
})
<AppBar position="static" color="default" data-test="component-wallet">
<Tabs
data-test="wallet-tabs"
value={selectedTab}
onChange={(event, value) => {
this.setState({selectedTab: val})
}}
indicatorColor="primary"
textColor="primary"
variant="scrollable"
scrollButtons="auto"
>
<Tab data-test="wallet-tab-0" label="Item One" />
<Tab data-test="wallet-tab-1" label="Item Two" />
<Tab data-test="wallet-tab-2" label="Item Three" />
</Tabs>
</AppBar>
{selectedTab === 0 && <TabContainer data-test="wallet-tab-container-0">Item One</TabContainer>}
{selectedTab === 1 && <TabContainer data-test="wallet-tab-container-1">Item Two</TabContainer>}
{selectedTab === 2 && <TabContainer data-test="wallet-tab-container-2">Item Three</TabContainer>}
点击后应将状态(selectedTab)更新为1
答案 0 :(得分:0)
onChange={(event, value) => {
this.setState({selectedTab: val})
}}
在您的代码中没有称为val
的东西,您函数的参数为value
。
我认为这就是问题。