Simple and complete taro.js 2.x testing utilities that encourage good testing practices.
// use yarn
yarn add taro-testing-library -D
// use npm
npm install taro-testing-library -D
For Taro 3.x and React, can use react-testing-library directly.
the only need is to configure moduleNameMapper
in jest.config.js
like this.
{
moduleNameMapper: {
'@tarojs/components': '@tarojs/components/dist-h5/react',
...
},
}
set preset
in your jest config file
{
"preset": "taro-testing-library"
}
render(Component, { container, target }) => { container, unmount, rerender }
: render method to mount a component
container
: The HTML element the component is mounted into.
default : document.body
target
: The HTML element the component is mounted.
default : container.appendChild(document.createElement('div'))
container
: containercomponent
: created Taro.js componentrerender(Component)
: method of rerender componentunmount()
: method of unmount componentdebug()
: method of log current dom...queries
: Returns all query functions that are binded to the target.renderToString(Component) => string
: export from nerv-server, you can use it to match snapshot
Unmounts the component from the container and destroys the container.
cleanup()
is called after each test automatically by default if the testing framework you're using supports the afterEach global (like mocha, Jest, and Jasmine).
However, you may choose to skip the auto cleanup by setting the TTL_SKIP_AUTO_CLEANUP
env variable to 'true'.
To make this even easier, you can also simply import taro-testing-library/dont-cleanup-after-each
which will do the same thing.
import Taro, { useState } from '@tarojs/taro';
import { Text } from '@tarojs/components';
const Counter = (props) => {
const { initial = 1 } = props;
const [count, setCount] = useState(initial)
return (
<Text onClick={() => {setCount(count+1)}} className="number">
{count}
</Text>
);
};
import Taro from '@tarojs/taro';
import { act, render } from 'taro-testing-library';
test('should render component', () => {
const { container } = render(<Counter />);
const $number = container.querySelector('.number');
expect($number.innerHTML).toEqual('1');
});
test('should rerender when trigger setState hooks', () => {
const { container } = render(<Counter />);
const $number = container.querySelector('.number');
act(() => {
$number.click()
})
expect($number.innerHTML).toEqual(`2`);
});
it('should support snapshot', () => {
const component = renderToString(<div>component without state</div>);
expect(component).toMatchSnapshot();
})
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型