diff --git a/src/cell/test/__snapshots__/index.legacy.js.snap b/src/cell/test/__snapshots__/index.legacy.js.snap
deleted file mode 100644
index cd68daa26..000000000
--- a/src/cell/test/__snapshots__/index.legacy.js.snap
+++ /dev/null
@@ -1,29 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CellGroup title slot 1`] = `
-
-`;
-
-exports[`arrow direction 1`] = `
-
-
-`;
-
-exports[`icon-prefix prop 1`] = `
-
-
-`;
-
-exports[`render slot 1`] = `
-Custom Icon
Custom Title
Custom Label
-
Custom Extra
-`;
-
-exports[`title-style prop 1`] = `
-
-`;
diff --git a/src/cell/test/__snapshots__/index.spec.js.snap b/src/cell/test/__snapshots__/index.spec.js.snap
new file mode 100644
index 000000000..f2898af44
--- /dev/null
+++ b/src/cell/test/__snapshots__/index.spec.js.snap
@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should change arrow direction when using arrow-direction prop 1`] = `
+
+
+
+
+`;
+
+exports[`should change icon class prefix when using icon-prefix prop 1`] = `
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`should render default slot and match snapshot 1`] = `
+
+
+
+
Custom Default
+
+
+
+`;
+
+exports[`should render extra slot and match snapshot 1`] = `
+
+
+
+
+ Custom Extra
+`;
+
+exports[`should render icon slot and match snapshot 1`] = `
+Custom Icon
+
+
+
+
+
+`;
+
+exports[`should render label slot and match snapshot 1`] = `
+
+`;
+
+exports[`should render title slot and match snapshot 1`] = `
+
+
+
Custom Title
+
+
+
+
+
+
+`;
diff --git a/src/cell/test/index.legacy.js b/src/cell/test/index.legacy.js
deleted file mode 100644
index 20ff9875b..000000000
--- a/src/cell/test/index.legacy.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import Cell from '..';
-import CellGroup from '../../cell-group';
-import { mount } from '@vue/test-utils';
-
-test('click event', () => {
- const click = jest.fn();
- const wrapper = mount(Cell, {
- context: {
- on: {
- click,
- },
- },
- });
-
- wrapper.trigger('click');
- expect(click).toHaveBeenCalled();
-});
-
-test('arrow direction', () => {
- const wrapper = mount(Cell, {
- props: {
- isLink: true,
- arrowDirection: 'down',
- },
- });
-
- expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('render slot', () => {
- const wrapper = mount({
- template: `
-
- Custom Icon
- Custom Title
- Custom Label
- Custom Extra
- |
- `,
- components: {
- Cell,
- },
- });
-
- expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('title-style prop', () => {
- const wrapper = mount(Cell, {
- props: {
- title: 'title',
- titleStyle: {
- color: 'red',
- },
- },
- });
-
- expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('CellGroup title slot', () => {
- const wrapper = mount(CellGroup, {
- scopedSlots: {
- title: () => 'CustomTitle',
- },
- });
-
- expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('icon-prefix prop', () => {
- const wrapper = mount(Cell, {
- props: {
- iconPrefix: 'my-icon',
- icon: 'success',
- },
- });
-
- expect(wrapper.html()).toMatchSnapshot();
-});
diff --git a/src/cell/test/index.spec.js b/src/cell/test/index.spec.js
new file mode 100644
index 000000000..620787b76
--- /dev/null
+++ b/src/cell/test/index.spec.js
@@ -0,0 +1,85 @@
+import Cell from '..';
+import { mount } from '@vue/test-utils';
+
+test('should render default slot and match snapshot', () => {
+ const wrapper = mount(Cell, {
+ slots: {
+ default: () => 'Custom Default',
+ },
+ });
+ expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should render title slot and match snapshot', () => {
+ const wrapper = mount(Cell, {
+ slots: {
+ title: () => 'Custom Title',
+ },
+ });
+ expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should render label slot and match snapshot', () => {
+ const wrapper = mount(Cell, {
+ props: {
+ title: 'Title',
+ },
+ slots: {
+ label: () => 'Custom Label',
+ },
+ });
+ expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should render icon slot and match snapshot', () => {
+ const wrapper = mount(Cell, {
+ slots: {
+ icon: () => 'Custom Icon',
+ },
+ });
+ expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should render extra slot and match snapshot', () => {
+ const wrapper = mount(Cell, {
+ slots: {
+ extra: () => 'Custom Extra',
+ },
+ });
+ expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should change arrow direction when using arrow-direction prop', () => {
+ const wrapper = mount(Cell, {
+ props: {
+ isLink: true,
+ arrowDirection: 'down',
+ },
+ });
+
+ expect(wrapper.find('.van-cell__right-icon').html()).toMatchSnapshot();
+});
+
+test('should change title style when using title-style prop', () => {
+ const wrapper = mount(Cell, {
+ props: {
+ title: 'title',
+ titleStyle: {
+ color: 'red',
+ },
+ },
+ });
+
+ expect(wrapper.find('.van-cell__title').element.style.color).toEqual('red');
+});
+
+test('should change icon class prefix when using icon-prefix prop', () => {
+ const wrapper = mount(Cell, {
+ props: {
+ icon: 'success',
+ iconPrefix: 'my-icon',
+ },
+ });
+
+ expect(wrapper.html()).toMatchSnapshot();
+});